Curious if angularJs has better method to calculate number of checkboxes

Question

I need to check if any checkbox is checked. so i am doing it like

self.isButtonEnabled = function() {
  var selectLineCheckboxs = document.getElementsByClassName('selectLineRadioInput'), 
  i = 0, checkboxLength = selectLineCheckboxs.length - 1;

  for (i = 0; i <= checkboxLength; i++) {
    if (selectLineCheckboxs[i].checked) {
      self.selectLineChecked = true;
      break;
    } else {
      self.selectLineChecked = false;
    }
  }
  return self.selectLineChecked;
};

in return i get true if any checkbox is checked.

so quite simple,

Now here i am looking if we can do the same with angularJs with any better approach and i do not want to use watch() function in angular.

Pankaj Parkar · Accepted Answer · 2015-03-10 20:34:39Z

2

I can help with your some code to convert it to look like in Angular way.

use angular.element (provided by jQLite to get element) as instead of document.getElementsByClassName
You could use $filter while checking attribute is checked or not

CODE

self.isButtonEnabled = function() {
    var selectLineCheckboxs = angular.element('.selectLineRadioInput');
    var checkedValues = $filter('filter')(selectLineCheckboxs, { 'checked': true }); //do filtering and contains check value
    self.selectLineChecked = checkedValues.length > 0 ? true : false;
    return self.selectLineChecked;
};

Note: You should add $filter dependency on your controller before using $filter

Update

I'd suggest you to create your own custom filter that could be usable in multiple purposes, or dynamically check property value is true or not. I know your code is as same as you ask in answer, but I putted some of your code as reusable component, which can dynamically work for any property value to check is true or not.

Filter

.filter('isPropertyTrue', function () {
    return function (elements, property) {
        var returnArray = [];
        angular.forEach(elements, function (val, index) {
            if (val[property]) returnArray.push(val)
        });
        return returnArray;
    }
});

Code

$scope.isButtonEnabled = function () {
    var selectLineCheckboxs = document.getElementsByClassName('selectLineRadioInput');
    var checkedValues = $filter('isPropertyTrue')(selectLineCheckboxs, 'checked');
    self.selectLineChecked = checkedValues.length > 0 ? true : false;
    return self.selectLineChecked;
};

JSFiddle Hope this could help you, Thanks.

edited Mar 10, 2015 at 20:34

answered Mar 2, 2015 at 10:26

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

3 Comments

Pankaj Parkar Over a year ago

@mayank does it helpful to you?

Mayank Over a year ago

This line has issue $filter('filter')(selectLineCheckboxs, { 'checked': true }); this returns all checkbox but not all those checked !!

Pankaj Parkar Over a year ago

@downvoter could I know the reason behind down vote?

Divya MV · Accepted Answer · 2015-02-27 11:09:14Z

0

i have been using it this way with ng-bind variable in scope $scope.Items .and the binded variable can be used to see what all items are checked.

 angular.forEach($scope.Items,function(key,value)
                  {          
                                if(key.Selected)
                                {
                                    counter++;
                                }
                     });

Here is a JSFiddle to illustrate the same

answered Feb 27, 2015 at 11:09

Divya MV

2,0514 gold badges34 silver badges59 bronze badges

3 Comments

Mayank Over a year ago

Number of checkbox i am getting from API which is dynamic.so i cant set $scope.Items name obj

Divya MV Over a year ago

if you can use jQuery may be this would be helpful $('form input[type=checkbox]:checked').size()

Mayank Over a year ago

I cant use jquery only javascript only

Collectives™ on Stack Overflow

Curious if angularJs has better method to calculate number of checkboxes

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related