md-Checkbox nicht mit der Arbeit ng Sie auf

Question

Ich will Position jedes Mal sparen, wenn ich Checkbox ändern:

<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 diesem Fall Controller berührt wird (ich versuchte, mit Konsolenprotokoll zu debuggen), aber Der Wert des Kontrollkästchens wird vor dem erneuten Laden der Seite nicht geändert. Nach dem Neuladen wird der Checkbox Wert wie erwartet angezeigt. Wenn ich ng-click="todoctrl.changeState(todo.name)" entferne, funktioniert das Kontrollkästchen gut, aber keine Informationen werden an den Controller gesendet.

Das ist mein Service:

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

Und dies ist der 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

Verwenden ng-change statt ng-click

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

ng-change Trigger nach Modell in Wertänderung