Counting selected checkbox in AngularJS

Question

I'm having a hard time counting selected checkboxes in my application. I've tried following along some other stack overflow questions but no dice yet...if you guys have any experience with counting checkboxes, some help would be great.

HTML:

<div class="row">
      <div class="col-md-12">
        <table id="document-table" st-table="documents" st-safe-src="yourDisplayedCollection" class="table">
         <div>Total checked: ({{selectedCounter}})</div>
          <thead>
            <tr>
              <th>
                <st-select-all all="yourDisplayedCollection"></st-select-all>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="document in documents">
              <td><input type="checkbox" ng-model="document.isSelected"/></td>
            </tr>
          </tbody>
         </table>
      </div>
    </div>

Controller:

.controller('DocumentsController', /** @ngInject */ function ($scope, restData, dateFormats, documents) {

  $scope.dateFormat = dateFormats.angularDateFilter;
  $scope.documents = documents.resultBag[0].documentBag;
  $scope.yourDisplayedCollection = [].concat(documents.resultBag[0].documentBag);
  $scope.selectAll = function (selected) {
        var documents = $scope.documents;
        angular.forEach(documents, function (documents) {
            documents.selected = selected;
        });
        // Update the counter
        if(selected){
            $scope.selectedCounter = documents.length;
        } else {
            $scope.selectedCounter = 0;
        }
    };

EDIT: I have a check all boxes checkbox at the top which is why i have the yourDisplayedCollection in the table as well as the ng-model="document.isSelected"

you have several problems...one being child scope of ng-repeat. Can those checkboxes be bound to a property of each document? Or must they be separate? — charlietfl
– charlietfl, Commented Oct 10, 2016 at 21:42
Take a look at my answer below. You need to take a look at your above example and redo it so it makes more sense. — Ohjay44
– Ohjay44, Commented Oct 10, 2016 at 21:43
ngcoderscope.wordpress.com/2016/08/12/multi-checkbox-directive hope this directive will come in handy for you ! — ngCoder
– ngCoder, Commented Oct 11, 2016 at 3:37

Ohjay44 · Accepted Answer · 2016-10-10 21:43:07Z

1

You need to rework a couple things if I am understanding the anticipated outcome correctly.

First(html):

<tr ng-repeat="document in documents">
  //Bind your model directily to the selected property in your object (document)
    <td><input type="checkbox" ng-model="document.selected"/></td>
</tr>

Second:

$scope.selectAll = function (selected) {
    var documents = $scope.documents;
    angular.forEach(documents, function (doc) {
        if(doc.selected)
           $scope.selectedCounter +=1;
    });

};

This will give you a correct count everytime. Though your function naming is misleading. SelectAll should mean literally select all. To me it looks like your just counting.

answered Oct 10, 2016 at 21:43

Ohjay44

8977 silver badges20 bronze badges

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

Comments

charlietfl · Accepted Answer · 2016-10-10 22:57:48Z

0

Simplest way to do this is use Array.prototype.filter() and use length of filtered array

<input type="checkbox" ng-model="document.selected"/>

And for counter:

$scope.selectedCounter = $scope.documents.filter(function(item){
    return item.selected;
}).length;

Need to be aware that you are breaking the golden rule of always using an object in ng-model.

ng-repeat creates a child scope and when you use a primitive in the child scope the parent controller can't see it change

answered Oct 10, 2016 at 22:57

charlietfl

172k14 gold badges125 silver badges154 bronze badges

1 Comment

charlietfl Over a year ago

create a plunker or other sandbox demo

Collectives™ on Stack Overflow

Counting selected checkbox in AngularJS

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