问题描述
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
andsubCategoryChk
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复选框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!