Question

我正在尝试在我的JS中为我正在使用Angular Material的基本ToDo应用添加一个函数，我需要知道如何让它读取md-checkbox的值/属性（是否勾选了。）

原因是我正在尝试发出警告，告知用户如果当前没有选中任何一个复选框，则需要至少选中一个复选框，然后点击底部的删除按钮。

任何人都知道我该怎么做？

Codepen：http://codepen.io/anon/pen/QpdpEa。

JS：

var app = angular.module('todoApp', ['ngMaterial']);

function menuController ($scope, $mdDialog) {
    var originatorEv;
    this.openMenu = function($mdOpenMenu, ev) {
        originatorEv = ev;
        $mdOpenMenu(ev);
    };
};  

app.controller('todoController', function($scope, $mdDialog, $mdToast) {

    $scope.sortBy = '-addedOn';

    $scope.taskList = [
        { name: 'Task 1', completed: false, addedOn: 1488722128000 },
        { name: 'Task 2', completed: false, addedOn: 1488722128000 },
    ];

    $scope.addTask = function() {
        if (angular.isUndefined($scope.taskName) || $scope.taskName.length === 0) {
            var alert =  $mdDialog.alert()
                .parent(angular.element(document.querySelector('#popupContainer')))
                .clickOutsideToClose(true)
                .title('Error')
                .textContent('You must enter a task name')
                .ok('Close');
            $mdDialog.show( alert )
                .finally(function() {
                    alert = undefined;
                });
        }
        else {
            $scope.taskList.push({name: $scope.taskName, addedOn: Date.now()});
            $scope.taskName = "";
            var pinTo = $scope.getToastPosition();
            $mdToast.show (
                $mdToast.simple()
                .textContent('Task Added')
                .position(pinTo)
                .hideDelay(3000)
            )
        }
    };

    $scope.selectAll = function() {
        angular.forEach($scope.taskList, function(task) {
            task.completed = true;
        });  
    };

    $scope.selectNone = function() {
        angular.forEach($scope.taskList, function(task) {
            task.completed = false;
        });  
    };

    $scope.delete = function(ev) {
        var confirm = $mdDialog.confirm()
            .title ('Are you sure you want to delete the selected tasks?')
            .textContent ('Deleted tasks can\'t be recovered.')
            .targetEvent (ev)
            .ok ('Confirm')
            .cancel ('Cancel')
        clickOutsideToClose: false;
        $mdDialog.show(confirm).then(function() {
            var pinTo = $scope.getToastPosition();
            $mdToast.show (
                $mdToast.simple()
                .textContent('Tasks Deleted')
                .position(pinTo)
                .hideDelay(3000)
            )
            $scope.status = 'Tasks Deleted';
            var i = $scope.taskList.length;
            while (i--) {
                var task = $scope.taskList[i];
                if(task.completed) {
                    $scope.taskList.splice(i, 1);
                }
            }

        }, 
        function() {
            $scope.status = 'Deletion Cancelled';
        });
    };

    function DialogController($scope, $mdDialog) {
        $scope.hide = function() {
            $mdDialog.hide();
        };

        $scope.cancel = function() {
            $mdDialog.cancel();
        };

        $scope.answer = function(answer) {
            $mdDialog.hide(answer);
        };
    };

    var last = {
        bottom: false,
        top: true,
        left: false,
        right: true
    };

    $scope.toastPosition = angular.extend({},last);

    $scope.getToastPosition = function() {
        sanitizePosition();
        return Object.keys($scope.toastPosition)
        .filter(function(pos) { return $scope.toastPosition[pos]; })
        .join(' ');
    };

    function sanitizePosition() {
        var current = $scope.toastPosition;
        if ( current.bottom && last.top ) current.top = false;
        if ( current.top && last.bottom ) current.bottom = false;
        if ( current.right && last.left ) current.left = false;
        if ( current.left && last.right ) current.right = false;
        last = angular.extend({},current);
    };

});

app.controller('toastController', function($scope, $mdToast) {
    $scope.closeToast = function() {
        $mdToast.hide();
    }

});

HTML：

<md-card-actions layout="row" class="md-padding">

                    <md-button ng-click="selectAll()" class="md-raised md-primary">Select All</md-button>

                    <md-button ng-click="selectNone()" class="md-raised md-primary">Select None</md-button>

                    <md-button ng-click="delete()" class="md-raised md-warn md-hue-2">Delete</md-button>

                </md-card-actions>

Answer 1

您可以迭代taskList变量并检查至少有一个元素是否具有completed值为true的属性。

我添加了自定义功能，绑定到Show按钮。如果单击它，您将在控制台true中看到是否选中了至少一个复选框，或者如果未选中任何复选框，则会false。

$scope.show = function(){
    console.log($scope.taskList.some(v => v.completed))
}

http://codepen.io/anon/pen/BWpWmw?editors=1010

Answer 2

我已对您的代码进行了更改，您可以看到＆amp;在这里运行：http://codepen.io/anon/pen/jBymPd?editors=1010

我使用$filter服务来获取completed成员设置为true的任务。

如果未选中任何内容，则可以显示警报，至少选择一个要删除的任务。如果选中了一个或多个任务，则只需将其删除即可。

代码中的新更改如下所示：

app.controller('todoController', function($scope, $mdDialog, $mdToast, $filter) {
        $scope.delete = function(ev) {

          var completedTasks = $filter('filter')($scope.taskList, { completed: true}, true);
          console.log(completedTasks); // array of completed tasks, can be empty.

          if (completedTasks.length > 0) {
            console.log('show dialog box to confirm'); 
            // your existing code.  
            var confirm = $mdDialog.confirm()
                .title ('Are you sure you want to delete the selected tasks?')
                .textContent ('Deleted tasks can\'t be recovered.')
                .targetEvent (ev)
                .ok ('Confirm')
                .cancel ('Cancel')
            clickOutsideToClose: false;
            $mdDialog.show(confirm).then(function() {
                var pinTo = $scope.getToastPosition();
                $mdToast.show (
                    $mdToast.simple()
                    .textContent('Tasks Deleted')
                    .position(pinTo)
                    .hideDelay(3000)
                )
                $scope.status = 'Tasks Deleted';
                var i = $scope.taskList.length;
                while (i--) {
                    var task = $scope.taskList[i];
                    if(task.completed) {
                        $scope.taskList.splice(i, 1);
                    }
                }

            }, 
            function() {
                $scope.status = 'Deletion Cancelled';
            });
          } else {
            alert('please select at-least one task to delete');
            console.log('show alert to check at-least one task');
          }
        };

    });

AngularJS - 获取复选框值？

2 个答案: