如何知道ng-repeat中是否選中復選框以及如何使用ng-model復選框

Question

json下面將使用`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的數據。

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

在這段代碼中，我試圖控制模型以檢查是否選中了復選框

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

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

我試圖通過在控制台中打印模型來檢查$scope.subCategoryCheckBox()和$scope.categoryCheckBox()是否選中了復選框。 但它在控制台中顯示undefined 。

Answer 1

對您的代碼進行以下更改：

• 制作vars categoryChk和subCategoryChk 對象 （它也可以是數組），如下所示：

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

• 將分配更改為html中的模型，以便與先前創建的對象 匹配 。 對於類別，從這個： ng-model="categoryChk"到： ng-model="categoryChk[cat.categoryId]" ......對於子類別，從這個： model="subCategoryChk"到這個model="subCategoryChk[subCat.subCategoryId]" 。

• 現在在函數中你可以通過索引訪問模型傳遞為參數，如下所示：

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

請參閱下面的工作代碼段和說明。

 (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中的類別，這就是你希望它的工作方式）

Answer 2

您可以直接將模型發送到您的函數，如下面的代碼所示，您也可以使用此plunker鏈接查看示例場景。

模板：

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

控制器：

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

Answer 3

如果你不需要保持這些對象干凈，你可以在任何cat / subcat中添加checked屬性，就像你在這里看到的一樣

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

檢查這個小提琴http://jsfiddle.net/ADukg/16200/