这个问题对我来说有点棘手,所以我会尽力解释。我试图成功地实现Angular的复选框与他们的ng-true-value正确与一个动态的ng-model。
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div ng-repeat="asset in asset">
<h5>{{ asset.title }} categories are...{{ asset.category[0] + " and " + asset.category[1] }}</h5>
<div class="form-group">
<label>Business</label>
<div class="checkbox" ng-repeat="category in categoryFactory.business">
<input type="checkbox" id="{{category}}" ng-true-value="{{'category'}}" ng-model="asset.category[$index]">
<label for="{{category}}">{{category}}</label>
</div>
</div>
<div class="form-group">
<label>Personal</label>
<div class="checkbox" ng-repeat="category in categoryFactory.personal">
<input type="checkbox" id="{{category}}" ng-true-value="{{'category'}}" ng-model="asset.category[$index]">
<label for="{{category}}">{{category}}</label>
</div>
</div>
</div>
</div>
我的最终目标是当我加载我的资产(找到下面…),它将显示像图片这里我的最终目标,正确的复选框被选中。业务和个人类别派生自工厂,每个表单组复选框都来自工厂中业务/个人中的重复列表。
$scope.asset = [{
title: "Sales Agreement",
category: ["finance-admin", "running-a-business"]
}];
我的问题是必须在复选框内正确实现ng-model。因为每个资产可以有一个或多个类别,所以它需要是动态的。我已经尝试使用$index使我的ng-model动态…
ng-model="asset.category[$index]"
但这似乎不像我希望的那样工作。我可能错过了一些非常容易和一些帮助将非常感激。
谢谢!顺便说一下,这是JSFIDDLE
目前,根据您的$index逻辑,两个数组categoryFactory.business
和asset.category
必须具有相同的大小,因此这里是更新的jsfiddle
但是最主要的部分是这个
首先,ng-true-value应该是一个表达式
ng-true-value="{{category}}"
第二,你的asset.category
数组索引应该匹配你的categoryFactory.business
数组
$scope.asset = [{
title: "Sales Agreement",
category: ["", "running-a-business","", "","finance-admin"]
}];
可能有一个更好的选择来管理这个,而不依赖于$index,但这应该适合您的情况
我用的是ng-checked,你可以把function作为属性值,ng-repeat会在每次循环中求值。
<input type="checkbox" id="{{category}}" ng-checked="isCategory(category)" >
$scope.isCategory = function(category){
return $scope.asset[0].category.indexOf(category) >= 0;
}
在isCategory()中,我们正在检查资产中类别的索引。类别数组,如果找到则为true。
https://jsfiddle.net/pg5dqgr9/8/