angularjs - md-checkbox 不适用于 ng-click

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>

在这种情况下， Controller 被触摸(我尝试使用控制台日志进行调试)，但在页面重新加载之前复选框值没有更改。重新加载后，复选框的值将按预期显示。如果我删除 ng-click="todoctrl.changeState(todo.name)" 那么复选框工作正常，但没有信息发送到 Controller 。

这是我的服务:

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

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

使用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 模型中值更改后触发