Angularjs - Checkbox - count multiple selected/unselected items

Question

how to count the number of selecte/unselected checkbox items using angularjs?

my html

    <label class="col-xs-5  pull-left" style="font-weight: bold; margin-left: 4px; margin-top: -17px;" >You have choose <font size="3" color="green">{{checkedResult}}</font> Customer(s)</label>

<tr ng-repeat="item in $data " >
             <td width="30" style="text-align: left" header="\'smsChkbx\'">
           <label>
            <input type="checkbox" class="ace" name="someList[]" value="{{item.somename}}" ng-model="checkboxes.items[item.somename]" />

checkbox function

 $scope.$watch('checkboxes.items', function(values) {
                        if (!$scope.mydata) {
                            return;
                        }
                        var checked = 0,
                            unchecked = 0,
                            total = $scope.mydata.length;
                        angular.forEach($scope.mydata, function(item) {
                            checked += ($scope.checkboxesSms.items[item.somename]) || 0;
                            unchecked += (!$scope.checkboxesSms.items[item.somename]) || 0;
                        });
                        if ((unchecked == 0) || (checked == 0)) {
                            $scope.checkboxes.checked = (checked == total);
                        }

                        **if(checked != 0 && unchecked != 0){
                            $scope.checkedResult++;
                        }**                    
                        $scope.tableParamsSms.reload();                                                
                         console.log($scope.checkedResult);
                        console.log((checked != 0 && unchecked != 0));
                        angular.element(document.getElementById("select_Sms")).prop("indeterminate", (checked != 0 && unchecked != 0));
                    }, true);

counts properly when i check for first time, the issue is it wlll also count when i uncheck the checked one

also want to count when its checked by multiple check option

CHAZTATS · Accepted Answer · 2016-04-28 11:44:33Z

1

You should make an ng-click in the checkbox and fire an event.

e.g: ng-click="selectOrDeselect(item)"

Then in that function do something like this to add or remove it from the list.

$scope.selectOrDeselect = function(item) {
  var index = $scope.selectedItems.indexOf(item);
  if (index === -1) {
    $scope.selectedItems.push(item);
  } else {
    $scope.selectedItems.splice(index, 1);
  }
};

Then have a var count = $scope.selectedItems.length

answered Apr 28, 2016 at 11:44

CHAZTATS

1148 bronze badges

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

1 Comment

CHAZTATS Over a year ago

I'm at work right now I'll give it a go on my lunch break :)

Abhinav · Accepted Answer · 2016-04-28 11:40:07Z

I could not modify your code but you can use something like this:

Html

<div ng-app>
  <h2>Sample</h2>
  <div ng-controller="MyCtrl">
   <div ng-repeat="item in Items">
     {{item.name}} <input type="checkbox" ng-model="item.selected" ng-change="Checked(item)" />
   </div>
  </div>
</div>

AngularJS

function MyCtrl($scope) {
$scope.SelectedItems = [];
  $scope.Items = [
    {
        id: 1,
      name: "ABC",
      selected: false
    },
    {
        id: 2,
      name: "DEF",
      selected: false
    },
    {
        id: 3,
      name: "GHI",
      selected: false
    }
  ]
  $scope.Checked = function(item) {
    if (item.selected) {
        $scope.SelectedItems.push(item);
    }
    else {
        var index = $scope.SelectedItems.indexOf(item);
      if (index > -1) {
        $scope.SelectedItems.splice(index, 1);
      }
    }
    console.log($scope.SelectedItems)  //array of selected items
  }
}

Collectives™ on Stack Overflow

Angularjs - Checkbox - count multiple selected/unselected items

my html

checkbox function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

my html

checkbox function

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related