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>

I've shared an answer based on what I think you are trying to solve. If you are after something else, please comment. — KKS
– KKS, Commented Mar 8, 2017 at 22:34

kind user · Accepted Answer · 2017-03-08 21:58:55Z

1

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

edited Mar 8, 2017 at 21:58

answered Mar 8, 2017 at 21:49

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KKS · Accepted Answer · 2017-03-08 22:33:25Z

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

    });

Collectives™ on Stack Overflow

AngularJS - Get Checkbox Value?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related