我已经徘徊了两到三个小时,我找到了一些相关的问题,但我的情景只是略微曲线。我必须生成一些checkboxes
,显然会通过ng-repeat
生成。如何显示我从Api
获得的预选值。这是我收到的数据类型。
预选数据
$scope.categoriess = [{"id":1,"name":"Garden Cleaning"},{"id":3,"name":"Home Cleaning"}].
这是我使用ng-repeat
的数据。
ng-repeat data
$scope.categories = [{"id":1,"name":"Garden Cleaning"},{"id":2,"name":"Gutter Cleaning"},{"id":3,"name":"Home Cleaning"},{"id":4,"name":"Pool Cleaning"}
HTML
<div ng-repeat="cats in categories">
<input type="checkbox" ng-model="categoriess.id[cats.id]">
<label>{{cats.name}}</label>
</div>
现在我如何告诉ng-repeat
检查预选数据,如果我想再检查几个方框,也应该检查它们,我希望它们存储在$scope.categoriess
中。我使用ng-checked
尝试了许多解决方案,或者在ng-checked
中进行函数调用我没有预期的结果。
答案 0 :(得分:1)
为什么不将您的数据格式化为另一个属性,例如
{"id":1,"name":"Garden Cleaning", "checked": true}
这样,当您遍历数据时,您可以选中复选框
<div ng-repeat="cats in categories">
<input type="checkbox" ng-checked="cats.checked">
<label>{{cats.name}}</label>
</div>
答案 1 :(得分:1)
我看到了这个,但我不知道它是如何工作的,上帝拯救了我的生命。见checklist-model。它非常简单,无需使用ng-checked或动态,预选并轻松更新
[1]: http://jsfiddle.net/iem_usman/v3k6pwrj/1/
答案 2 :(得分:0)
像这样更改你的HTML:
<div ng-repeat="cats in categories">
<input type="checkbox" ng-model="categoriess.id[cats.id]" ng-checked="isChecked(cats.id);">
<label>{{cats.name}}</label>
</div>
在您的控制器中添加此功能:
$scope.selectedCategoriess = [{"id":1,"name":"Garden Cleaning"},{"id":3,"name":"Home Cleaning"}].
$scope.isChecked = function(id){
for (var i = 0; i < $scope.selectedCategoriess.length; i++) {
if ($scope.selectedCategoriess[i].id == id) {
return true;
}
}
return false;
}
如果ID可用,则选中的值为&#34; true&#34;。