AngularJS - Get Checkbox Value?

Question

I'm trying to add a function in my JS for a basic ToDo app that I'm working on using Angular Material and I need to know how I can get it to read the value/property of an md-checkbox (whether or not it is ticked).

The reason for this is I'm trying to make an alert appear informing the user that they need to select at least one checkbox if none are currently selected and they click on the Delete button at the bottom.

Anyone know how I could do this?

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

I've made changes to your code that you can see & run here: http://codepen.io/anon/pen/jBymPd?editors=1010

I'm using the $filter service to get the task(s) that have completed member set to true.

If nothing has been checked, then you can show an alert to at-least select one task to delete. If one or more task is checked, then you just delete them.

The new changes in your code are shown below:

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

    });

Answer 2

You can just iterate over the taskList variable and check if at least one element has property completed with true value.

I've added a custom function, binded to the Show button. If you click on it, you will see in the console true if there's at least one checkbox checked or false if none of the checkboxes is checked.

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

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