MD-複選框不工作納克單擊

Question

我希望當我改變複選框，每次保存位置：

<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); 
     } 
    } 
})(); 

Answer 1

使用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模型

值變化後觸發