Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 16.03.2015, 21:25
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от desergik
C Angular столкнулся первый раз, поэтому плохо в нём разбираюсь.
Ангулар работает на клиентской стороне. В БД пишет серверный скрипт...

Сообщение от desergik
Вот исходный код программы:
Это огрызки... Посмотри в других темах как нужно делать тестовые примеры. Они работают прямо тут на странице...
Ответить с цитированием
  #3 (permalink)  
Старый 17.03.2015, 08:45
Новичок на форуме
Отправить личное сообщение для desergik Посмотреть профиль Найти все сообщения от desergik
 
Регистрация: 16.03.2015
Сообщений: 3

Сообщение от ksa Посмотреть сообщение
Это огрызки... Посмотри в других темах как нужно делать тестовые примеры.
Сделал: https://jsfiddle.net/desergik/cgo9417z/
Ответить с цитированием
  #4 (permalink)  
Старый 17.03.2015, 09:03
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от desergik
Сделал
Что именно?

Если ты хочешь что-то сохранять на сервере в БД - по наступлении неких событий, шли запросы с данными на сервер и пусть он те данные сохраняет.
Ответить с цитированием
  #5 (permalink)  
Старый 17.03.2015, 10:56
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

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>
Ответить с цитированием
  #6 (permalink)  
Старый 17.03.2015, 20:42
Новичок на форуме
Отправить личное сообщение для desergik Посмотреть профиль Найти все сообщения от desergik
 
Регистрация: 16.03.2015
Сообщений: 3

Прочитал подробнее про $resource. Попробовал написать сохранение галочки checkbox для выбранной задачи в БД с использованием $resource вместо $http:
// Функция, которая должна сохранять галочку checkbox в БД:
        $scope.change = function()
        {
            var onetask = Task.get( function()
            {
                onetask.complete = true;
                onetask.$save();
            });
        };

Но программа все равно не работает. Подозреваю, что это происходит из-за того, что метод get() не знает к какому полю БД нужно обратится. Как решить проблему? Заранее спасибо.
Ответить с цитированием
  #7 (permalink)  
Старый 18.03.2015, 08:28
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от desergik
Как решить проблему?
Отстань от Ангулара и спрашивай про сохранение на сайте по серверному языку...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужен полноценный список.... lolbla2 Общие вопросы Javascript 3 16.04.2013 22:50
селект переделанный под список Vasёk18 Элементы интерфейса 0 13.04.2012 23:49
Эмулировать список через селект Nanto Элементы интерфейса 2 06.03.2012 11:54
Заполнить список значениями из динамически созданного выпадающего списка zhuzha Элементы интерфейса 0 17.08.2010 14:40
Как получить список пользовательских функций объекта window? Маэстро Events/DOM/Window 13 03.07.2010 13:20