Список задач
Вложений: 1
Всем привет.
Есть приложение на связке 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 столкнулся первый раз, поэтому плохо в нём разбираюсь. |
Цитата:
Цитата:
|
Цитата:
|
Цитата:
Если ты хочешь что-то сохранять на сервере в БД - по наступлении неких событий, шли запросы с данными на сервер и пусть он те данные сохраняет. |
desergik, вот ка нужно делать тестовые примеры...
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
angular.module('test', [])
.controller(
'ctrl',
[
'$scope',
'$http',
ctrl
]
);
function ctrl($scope,$http) {
$scope.items = [
{id: 0, name: 'Target 0', close: false},
{id: 1, name: 'Target 1', close: false},
{id: 2, name: 'Target 2', close: false}
];
$scope.status=function (Obj){
alert(Obj.id + ' = ' + Obj.close);
// тут отправляй запрос на сервер
/*
$http.get(<url>).success(function(data) {
alert('Ok');
});
*/
};
}
</script>
</head>
<body ng-app="test">
<div ng-controller="ctrl">
<ul>
<li ng-repeat='item in items'>
<span>{{item.name}}</span>
<label>
<input type='checkbox' ng-model='item.close' ng-change='status(item)' />
Close
</label>
</li>
</ul>
</div>
</body>
</html>
|
Прочитал подробнее про $resource. Попробовал написать сохранение галочки checkbox для выбранной задачи в БД с использованием $resource вместо $http:
// Функция, которая должна сохранять галочку checkbox в БД:
$scope.change = function()
{
var onetask = Task.get( function()
{
onetask.complete = true;
onetask.$save();
});
};
Но программа все равно не работает. Подозреваю, что это происходит из-за того, что метод get() не знает к какому полю БД нужно обратится. Как решить проблему? Заранее спасибо. |
Цитата:
|
| Часовой пояс GMT +3, время: 22:17. |