How To Know Checkbox Checked Or Not Inside Ng-repeat And How To Use Ng-model For Checkbox

Below json will use in `ng-repeat. [ { 'categoryId': 1, 'categoryName': 'Men', 'subCategory': [ { 'subCategoryId': 1, 'subCategoryName': 'Footwe

Solution 1:

Make the following changes to your code:

• Make the vars categoryChk and subCategoryChkobjects (it could be arrays too), like this:

  $scope.categoryChk = {};$scope.subCategoryChk = {};

• Change the assignation to the model in the html in order to match with the previously created objects. For categories, from this: ng-model="categoryChk" to this: ng-model="categoryChk[cat.categoryId]" ... and for the subcategories, from this: model="subCategoryChk" to this model="subCategoryChk[subCat.subCategoryId]".

• Now in the functions you can access the model throught the index passes as argument like this:

  $scope.subCategoryCheckBox = function(catId, subId, index) {
    console.log($scope.subCategoryChk[subId]);
  }
  
  $scope.categoryCheckBox = function(catId, index) {
    console.log($scope.categoryChk[catId]);
  }
  

See working snippet and explanation below.

(function() {
  angular
    .module('app', [])
    .controller('ctrl', ctrl);

  functionctrl($scope) {

    $scope.catSubCat = [{
        "categoryId": 1,
        "categoryName": "Men",
        "subCategory": [{
            "subCategoryId": 1,
            "subCategoryName": "Footwear"
          },
          {
            "subCategoryId": 3,
            "subCategoryName": "Cloths"
          }
        ]
      },
      {
        "categoryId": 2,
        "categoryName": "Women",
        "subCategory": [{
          "subCategoryId": 2,
          "subCategoryName": "Footwear"
        }]
      },
      {
        "categoryId": 3,
        "categoryName": "Kids",
        "subCategory": []
      }
    ];
    
    $scope.categoryChk = {};
    $scope.subCategoryChk = {};

    $scope.subCategoryCheckBox = function(catId, subId, index) {
      console.log($scope.subCategoryChk[subId]);
    }

    $scope.categoryCheckBox = function(catId, index) {
      console.log($scope.categoryChk[catId]);
    }

  }

})();

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="app"ng-controller="ctrl"><ulclass="list-unstyled"ng-repeat="cat in catSubCat"><li><label><inputtype="checkbox"name="categories"id="category_{{cat.categoryId}}"ng-model="categoryChk[cat.categoryId]"ng-change="categoryCheckBox(cat.categoryId, $index)"readonly><spanclass="gap">{{cat.categoryName}}</span></label><ulclass="list-unstyled"ng-repeat="subCat in cat.subCategory"><li><label><inputtype="checkbox"name="subcategories"id="sub_category_{{subCat.subCategoryId}}"ng-model="subCategoryChk[subCat.subCategoryId]"ng-change="subCategoryCheckBox(cat.categoryId, subCat.subCategoryId, $index)"><spanclass="gap">{{subCat.subCategoryName}}</span></label></li></ul></li></ul></div>

The thing is, when you assign categoryChk and subCategoryChk to your model it assigns the same ng-model to all categories and subcategories respectively. This is not the way you want it to work, you need to assign a different model for every check (when you do categoryChk[cat.categoryId], you create on the fly an attribute in categoryChk for that model, and so on for every category in the ng-repeat, this is how you want it to work)

Solution 2:

You may directly send the model to your function as shown in the below code, also you can check with this plunker link for your example scenario.

Template:

   <input type="checkbox" name="categories"id="category_{{cat.categoryId}}" 
              ng-model="categoryChk" ng-change="categoryCheckBox(cat.categoryId, $index, categoryChk)"readonly><span class="gap">{{cat.categoryName}}</span>

Controller:

  $scope.categoryCheckBox = function(catId, index, selectedCat) {
      console.log(selectedCat);
  };

Solution 3:

If you don't need to mantain these objects clean, you can add in any cat/subcat the checked property like as you can see here

<input type="checkbox" name="categories"id="category_{{cat.categoryId}}" ng-model="cat.categoryChk" ng-change="categoryCheckBox(cat, $index)"readonly><span class="gap">{{cat.categoryName}}</span>

check this fiddle http://jsfiddle.net/ADukg/16200/