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

Answer 1

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

eg: 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

Answer 2

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
  }
}