md-casella di controllo non funziona con ng-click

Question

voglio salvare posizione ogni volta quando cambio casella di controllo:

<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> 

In questo controller caso è toccato (ho provato con il debug con log console), ma il valore della casella di controllo non viene modificato prima che la pagina venga ricaricata. Dopo aver ricaricato il valore, la casella di controllo è presentata come previsto. Se rimuovo ng-click="todoctrl.changeState(todo.name)", la casella di controllo funziona correttamente, ma nessuna informazione viene inviata al controller.

Questo è il mio servizio:

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

e questo è il controller:

(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

Uso ng-change invece di ng-click

<md-checkbox ng-model="todo.reached" aria-label="Is reached" ng-change="todoctrl.changeState(todo.name, todo.reached)"></md-checkbox> 

ng-change grilletto dopo modifica del valore nel modello di