JSFiddle - React, Tailwind, and code Playground

by menocomp

HTML

<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<body ng-app>
    <div ng-controller= "TodoCtrl">
        <h2>Number of ToDo: {{todos.length}}</h2>
        
        <ul>
            <li ng-repeat="todo in todos">
                <input type="button" ng-click="RemoveFromtodo()" value="Delete"/>
                <input type="button" ng-click="Edittodo()" value="Edit"/>
                <input id="chk{{todo.text}}" 
                type="checkbox"                         
                ng-model="todo.done" />
                <label class="chk-{{todo.done}}" for="chk{{todo.text}}">
                    {{todo.text}}
                </label>
            </li>
        </ul>
        <input type="text" id="txtUpsert" ng-model="todoInsert" />
        <input type="button" id="btnUpsert" ng-click="Upserttodo()" value="{{Editedtodo && 'Update' || 'Add'}}"/>
        <br />
        <input type="button" class="btn-hidden-{{todos.length == 0}}" ng-click="RemoveSelected()" value="Remove Selected"/>
        <input type="button" class="btn-hidden-{{todos.length == 0}}" ng-click="ToggleSelectAll(true)" value="Select All"/>
        <input type="button" class="btn-hidden-{{todos.length == 0}}" ng-click="ToggleSelectAll(false)" value="Un-Select All"/>
    </div>    
</body>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
body { padding:3em; font-size:larger }

ul {
    list-style-type: none;
    /*padding: 0px;*/
}

.chk-true {
    color: gray;
    text-decoration: line-through;
}

.btn-hidden-true{
    display:none;    
}

JavaScript

function TodoCtrl($scope) {
    $scope.todos = [
        {text: "Jquery", done: true}, 
        {text: "Angular", done: false}, 
        {text: "Ajax", done: false}
    ];
    
    $scope.Upserttodo = function() {
        if($scope.todoInsert === undefined) return;
        if ($scope.Editedtodo) {
            $scope.Editedtodo.text = $scope.todoInsert;
            delete $scope.Editedtodo;
        }
        else
            $scope.todos.splice($scope.todos.length, 0, {text: $scope.todoInsert, done: false});
        delete $scope.todoInsert;
    }
    
    $scope.RemoveFromtodo = function() {
        $scope.todos.splice(this.$index, 1);
    }
    
    $scope.Edittodo = function() {       
        document.querySelectorAll('#txtUpsert')[0].value = this.todo.text;        
        $scope.Editedtodo = this.todo;
    }    
    
    $scope.RemoveSelected = function() {
        $scope.todos = _.filter($scope.todos, function(todo) {
            return !todo.done;
        });
    }
    
    $scope.ToggleSelectAll = function(IsSelectAll) {
        _.filter($scope.todos, function(todo) {
            todo.done = IsSelectAll;            
        });
    }
}