javascript - 如何知道 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

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

• 制作变量 categoryChk 和 subCategoryChk objects(也可以是数组)，像这样:

  $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 中的每个类别，这就是您希望它的工作方式)