Показать сообщение отдельно
  #1 (permalink)  
Старый 16.03.2015, 20:39
Новичок на форуме
Отправить личное сообщение для desergik Посмотреть профиль Найти все сообщения от desergik
 
Регистрация: 16.03.2015
Сообщений: 3

Список задач
Всем привет.
Есть приложение на связке Angular + Web2Py - простой список задач.
Идея в том, что в поле ввода мы пишем задачу и по нажатии клавиши Enter она создается (добавляется в БД на Web2Py). У задачи есть checkbox, который отображает статус задачи (выполнена / не выполнена). Однако он не работает (т.е. нажать на него можно, но он ничего не делает). Так же есть кнопка для удаления задачи из списка. Для наглядности приложил к сообщению скриншот.
Вот исходный код программы:
1) Файл main.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>

2) Файл main-controller.js
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; // Не работает! Как правильно написать???
        }
    });

Требуется дописать данное приложение, исправив код так, чтобы галочка о выполнении задачи сохранялась в БД.
Посмотрев документацию, нашел директиву ngChange, которая вызывает определенную функцию, если пользователь изменил значение поля ввода. Данную директиву я применил в строке 11 в main.html. Но как написать функцию change(), которая будет сохранять галочку checkbox для выбранной задачи в БД я не знаю, поэтому прошу помощи.

P.S. C Angular столкнулся первый раз, поэтому плохо в нём разбираюсь.
Изображения:
Тип файла: jpg Image 1 16-03-2015.jpg (3.9 Кб, 5 просмотров)
Ответить с цитированием