MD-チェックボックスは、私は位置に私は、チェックボックスを変更するたびに保存するNGクリック

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> 

コントローラがタッチされる。この場合、（私はコンソールログをデバッグしてみました）が、ページのリロード前にチェックボックスの値は変更されません。リロード後、値はcheckboxが期待どおりに表示されます。 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トリガー