angularjs – md-checkbox不适用于ng-click
发布时间:2020-12-17 08:21:49 所属栏目:安全 来源:网络整理
导读:我想在每次更改复选框时保存位置: h1 class="md-display-2"Simple TODO ng app/h1h2 class="md-display-3"/h2div ng-include src="'todo/add.html'"/divdiv div layout="row" div flex class="md-title"Scope/div div flex="10" class="md-title"Till date/
我想在每次更改复选框时保存位置:
<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> 在这种情况下触摸控制器(我尝试使用控制台日志进行调试),但在重新加载页面之前不会更改复选框值.重新加载后,复选框按预期显示. 这是我的服务: (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); } } })();
使用ng-change而不是ng-click
<md-checkbox ng-model="todo.reached" aria-label="Is reached" ng-change="todoctrl.changeState(todo.name,todo.reached)"></md-checkbox> 模型中值更改后的ng-change触发器 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |