我想在每次更改复选框时保存位置:
<h1 class="md-display-2">Simple TODO ng app</h1> <h2 class="md-display-3"></h2> <div ng-include src="'todo/add.html'"></div> <div> <div layout="row"> <div flex class="md-title">Scope</div> <div flex="10" class="md-title">Till date</div> <div flex="10" class="md-title">Is reached?</div> <div flex="10" class="md-title"> <span ng-click="todoctrl.show_add()" class="material-icons controls">add</span> </div> </div> <div layout="row" ng-repeat="todo in todoctrl.todos track by $index"> <div flex ng-class="{true:'striked',false:'simple'}[todo.reached]">{{todo.name}}</div> <div flex="10"> {{todo.tillDate | date:'dd/MM/yyyy'}} </div> <div flex="10"> <md-checkBox ng-model="todo.reached" aria-label="Is reached" ng-click="todoctrl.changeState(todo.name)"></md-checkBox> </div> <div flex="10"> <span ng-click="todoctrl.deleteScope(todo.name)" class="material-icons controls">clear</span> </div> </div> </div>
在这种情况下触摸控制器(我尝试使用控制台日志进行调试),但在重新加载页面之前不会更改复选框值.重新加载后,复选框按预期显示.
如果我删除ng-click =“todoctrl.changeState(todo.name)”,则复选框工作正常,但没有信息发送到控制器.
这是我的服务:
(function() { 'use strict'; angular.module('app').service('ToDoService',ToDoService); ToDoService.$inject = ['JsonService']; function ToDoService(JsonService) { return { deleteScope : deleteScope,submitScope : submitScope,changeState : changeState,getData : getData } function getData() { var todos = JsonService.getData(); return todos; } function deleteScope(arr,scope) { arr.splice(findElementByScope(arr,scope),1); JsonService.setData(arr); } function submitScope(arr,scope,tillDate) { var newTodo = {}; newTodo.name = scope; newTodo.reached = false; newTodo.tillDate = tillDate; arr.push(newTodo); JsonService.setData(arr); } function changeState(arr,scope) { console.log("Service change state for scope: " + scope); var todo = {}; var index = findElementByScope(arr,scope); todo = arr[index]; todo.reached = !todo.reached; JsonService.setData(arr); } function findElementByScope(arr,scope) { for (var i = arr.length; i--;) { if (arr[i].name == scope) { return i; } } return -1; } } })();
这是控制器:
(function() { 'use strict'; angular.module('app').controller('ToDoController',ToDoController); function ToDoController(ToDoService) { var vm = this; vm.show_form = false; vm.todos = ToDoService.getData(); vm.scope = ''; vm.show_add = show_add; vm.submitScope = submitScope; vm.deleteScope = deleteScope; vm.changeState = changeState; function show_add() { console.log("Controller show add"); vm.show_form = true; } function submitScope() { ToDoService.submitScope(vm.todos,vm.scope,vm.tillDate); vm.show_form = false; vm.scope = ''; } function deleteScope(scope) { ToDoService.deleteScope(vm.todos,scope); } function changeState(scope) { ToDoService.changeState(vm.todos,scope); } } })();