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

Question

这个问题对我来说解释起来有点棘手，所以我会尽力而为。我正在尝试使用动态 ng-model 正确地使用其 ng-true-value 成功实现 Angular 复选框。

<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>

我的最终目标是当我加载我的资产（在下面找到...）时它会像这里的图片一样显示 My end goal，并选中正确的复选框。 Business 和 Personal 类别源自工厂，每个表单组复选框都来自工厂中 Business / Personal 的 ng-repeat 列表。

$scope.asset = [{
  title: "Sales Agreement",
  category: ["finance-admin", "running-a-business"]
}];

我的问题是必须在复选框内正确实施 ng-model。由于每个资产都可以有 1 个或多个类别，因此它需要是动态的。我尝试使用 $index 使我的 ng-model 动态化...

ng-model="asset.category[$index]"

但这似乎不像我希望的那样有效。我可能遗漏了一些非常简单的东西，我们将不胜感激一些帮助。

谢谢！顺便说一句，这里是 JSFIDDLE

Answer 1

目前，根据您的 $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 但这应该适合你的情况

Answer 2

我用的是ng-checked，你可以把函数作为一个属性值，ng-repeat会在每次循环中对函数求值。

<input type="checkbox" id="{{category}}" ng-checked="isCategory(category)" >

$scope.isCategory = function(category){
   return  $scope.asset[0].category.indexOf(category) >= 0;
}

在 isCategory() 中，我们正在检查 asset.category 数组中类别的索引，如果找到则为真。

https://jsfiddle.net/pg5dqgr9/8/

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

Angular ng-repeat with bootstrap input checkbox with dynamic ng-model using ng-true-value

javascript

checkbox

twitter-bootstrap

angularjs