JSFiddle - React, Tailwind, and code Playground

by desergik

HTML

<div class="row">
    <div class="col-sm-8 col-sm-offset-2">
        <form ng-submit="add()">
            <input ng-model="newTask" class="new-task form-control input-lg" ng-class="{first: tasks.length === 0}"
                   type="text" placeholder="What needs to be done?">
        </form>

        <table class="tasks table table-hover">
            <tr ng-repeat="task in tasks">
                <td class="complete">
                    <input ng-model="task.complete" type="checkbox" ng-change="change()">
                    <!-- В предедущей строке я попробовал применить ngChange, но не смог написать правильный код для ф-ии change() -->
                </td>
                <td class="title">
                {{task.title}}
                </td>
                <td class="remove">
                    <button ng-click="remove(task)" class="btn btn-danger">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                </td>
            </tr>
        </table>

    </div>
</div>

CSS

.new-task, .new-task:focus {
    border-radius: 0;
    box-shadow: 0 4px 8px lightgrey;
    margin: 2em 0;
}

.new-task.first {
    margin-top: 25%;
}

.tasks .complete input {
    margin: 0;
    height: 2.2em;
    width: 2.2em;
}

.tasks .title {
    width: 100%;
    font-size: 1.5em;
}

.tasks .success .title {
    text-decoration: line-through;
}

JavaScript

angular.module('todo')
    .controller('MainController', function ($scope, $resource) {
        var Task = $resource('/todo/api/tasks/:id', {id: '@id'});

        function refresh() {
            Task.query(function (tasks) {
                $scope.tasks = tasks;
            });
        }

        refresh();

        // Создание новой задачи:
        $scope.add = function () {
            if ($scope.newTask) {
                var task = new Task({
                    complete: false,
                    title: $scope.newTask
                });
                task.$save()
                    .then(refresh);
                $scope.newTask = undefined;
            }
        };

        // Удаление задачи из списка:
        $scope.remove = function (task) {
            task.$remove()
                .then(refresh);
        };

        // Функция, которая должна сохранять галочку checkbox в БД:
        function change() {
            //$scope.complete = true; // Не работает!
        }
    });