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 ट्रिगर मॉडल

में मूल्य परिवर्तन के बाद