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

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

制作变量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]);
}

请参阅下面的工作代码段和解释。

＆＃13;

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

＆＃13;

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

＆＃13;

问题是，当您将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/

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

3 个答案: