JSFiddle - React, Tailwind, and code Playground

by bmomani

HTML

<script src="https://code.angularjs.org/0.9.19/angular-0.9.19.min.js"
        ng:autobind></script>

<div ng:controller="TodoCtrl">
  <form ng:submit="addTodo()">
    <input type="text" name="todoText" size="35"
           placeholder="enter your todo here">
    <input type="submit" value="add"><br>
    <span>{{remaining()}} remaining</span>
    <input type="button" ng:click="removeDone()" value="clean up">
  </form>

  <ul my:sortable="todos" my:onsort="onSort()">
    <li ng:repeat="todo in todos">
      <input type="checkbox" name="todo.done">
      <span ng:class="'done-' + todo.done">{{todo.text}}</span>
    </li>
  </ul>
    <br>
  <ul> 
    <li ng:repeat="todo in todos">  
      <span ng:class="'done-' + todo.done">{{todo.text}}</span>
    </li>
  </ul>

</div>

CSS

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

JavaScript

function TodoCtrl() {
    var scope = this;
    scope.todos = [{
        text: 'learn angular',
        done: true},
    {
        text: 'build an angular app',
        done: false}];

    scope.addTodo = function() {
        scope.todos.push({
            text: scope.todoText,
            done: false
        });
        scope.todoText = '';
    };

    scope.remaining = function() {
        return angular.Array.count(scope.todos, function(todo) {
            return !todo.done;
        });
    };

    scope.removeDone = function() {
        var oldTodos = scope.todos;
        scope.todos = [];
        angular.forEach(oldTodos, function(todo) {
            if (!todo.done) scope.todos.push(todo);
        });
    };
    scope.onSort = function() {
        console.log("onSort");
    };
}

    angular.directive("my:sortable", function(expression, compiledElement){
        return function(linkElement){
            var scope = this;
            linkElement.sortable(
            {
                placeholder: "ui-state-highlight",
                opacity: 0.8,
                update: function(event, ui) {
                    var model = scope.$tryEval(expression);
                    var newModel = [];
                    var items = [];
                    linkElement.children().each(function() {
                        var item = $(this);
                        // get old item index
                        var oldIndex = item.attr("ng:repeat-index");
                        if(oldIndex) {
                            // new model in new order
                            newModel.push(model[oldIndex]);
                            // items in original order
                            items[oldIndex] = item;
                            // and remove
                            item.detach();
                        }
                    });
                    // restore original dom order, so angular does not get confused
                   ...