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

前端之家收集整理的这篇文章主要介绍了angularjs – md-checkbox不适用于ng-click前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在每次更改复选框时保存位置:
<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);
        }
    }
})();
使用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触发器

猜你在找的Angularjs相关文章