Angular ng-repeat with bootstrap输入复选框,动态ng-model使用ng-true-va



这个问题对我来说有点棘手,所以我会尽力解释。我试图成功地实现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.businessasset.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/

最新更新