如何知道ng-repeat中是否选中复选框以及如何使用ng-model复选框 [英] How to know checkbox checked or not inside ng-repeat and how to use ng-model for checkbox

问题描述

json将使用`ng-repeat。

Below json will use in `ng-repeat.

[
  {
    "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": []
  }
]

下面的代码有两个 ng-repeat 并显示上面json的数据。

Below code have two ng-repeat and showing data of above json.

<ul class="list-unstyled" ng-repeat="cat in catSubCat">
    <li>
        <label>
            <input type="checkbox" name="categories" id="category_{{cat.categoryId}}" ng-model="categoryChk" ng-change="categoryCheckBox(cat.categoryId, $index)" readonly><span class="gap">{{cat.categoryName}}</span>
        </label>
        <ul class="list-unstyled" ng-repeat="subCat in cat.subCategory">
            <li>
                <label>
                    <input type="checkbox" name="subcategories" id="sub_category_{{subCat.subCategoryId}}" ng-model="subCategoryChk" ng-change="subCategoryCheckBox(cat.categoryId, subCat.subCategoryId, $index)"><span class="gap">{{subCat.subCategoryName}}</span></label>
            </li>
        </ul>
    </li>
</ul>

在这段代码中我试图控制模型以检查是否选中了复选框

In this code I am trying to console the models to check whether the checkbox are checked or not

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

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

我正在尝试检查是否在<$ c中选中了复选框$ c> $ scope.subCategoryCheckBox（）和 $ scope.categoryCheckBox（）在控制台中打印模型。但它在控制台中显示 undefined 。

I am trying to check whether the checkbox are checked or not inside $scope.subCategoryCheckBox() and $scope.categoryCheckBox() by printing model in console. But it is showing undefined in console.

推荐答案

进行以下更改到您的代码：

Make the following changes to your code:

• 使vars categoryChk 和 subCategoryChk 对象（也可能是数组），如下所示：

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

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

更改html中模型的分配，以便匹配与之前创建的对象。对于类别，从： ng-model =categoryChk到此： ng-model =categoryChk [cat.categoryId] ...以及子类别，从： model =subCategoryChk到此 model =subCategoryChk [subCat.subCategoryId] 。

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);

  function ctrl($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]);
    }

  }

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">

  <ul class="list-unstyled" ng-repeat="cat in catSubCat">
    <li>
      <label>
            <input type="checkbox" name="categories" id="category_{{cat.categoryId}}" ng-model="categoryChk[cat.categoryId]" ng-change="categoryCheckBox(cat.categoryId, $index)" readonly><span class="gap">{{cat.categoryName}}</span>
        </label>
      <ul class="list-unstyled" ng-repeat="subCat in cat.subCategory">
        <li>
          <label>
                    <input type="checkbox" name="subcategories" id="sub_category_{{subCat.subCategoryId}}" ng-model="subCategoryChk[subCat.subCategoryId]" ng-change="subCategoryCheckBox(cat.categoryId, subCat.subCategoryId, $index)"><span class="gap">{{subCat.subCategoryName}}</span></label>
        </li>
      </ul>
    </li>
  </ul>

</div>

事情是，当您将 categoryChk 和 subCategoryChk 分配给您的模型时，它会分配相同的 ng-model 分别对所有类别和子类别。这不是你希望它工作的方式，你需要为每个检查指定一个不同的模型（当你执行 categoryChk [cat.categoryId] 时，你动态创建该模型的 categoryChk 中的属性，等等 ng-repeat 中的每个类别，这就是你的方法希望它工作）

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)

这篇关于如何知道ng-repeat中是否选中复选框以及如何使用ng-model复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！