ng重复另一个中继器值的数组

时间:2015-02-16 12:58:57

标签: javascript html angularjs

使用 AngularJS

拥有以下 JSON 篇:

"skills": {
"Charisma": {},
"Dexterity": {
  "Sk3": [
    [
      true,
      true,
      true,
      true,
      false
    ],
    44
  ]
}, ...

以下相应的 HTML

<div class="panel panel-info" ng-repeat="(key, value) in character.skills | orderBy:'$index':true">
                <div class="panel-heading">
                    <span class="accordion-toggle collapsed" data-toggle="collapse" data-target="#{{key}}">
                        <header>
                            <label>{{key}}</label>
                        </header>
                    </span>
                </div>

                <ul id="{{key}}" class="list-group collapse">
                    <li class="list-group-item" ng-repeat="(K, V) in value">
                        <input type="checkbox" />
                        <label>{{K}}</label>
                    </li>
                </ul>
            </div> ...

如何重复并将布尔数组绑定到我的复选框输入? 结果将是每个技能名称前面的5个复选框,根据布尔值选择或取消选择。

我尝试过类似的事情:

<li class="list-group-item" ng-repeat="(K, V) in value">
       <input type="checkbox" ng-repeat="bool in V[0]" ng-model="V[0]"/>
       <label>{{K}}</label>
</li>

但那是不行的..

1 个答案:

答案 0 :(得分:1)

你可以在你的情况下绑定到这样的布尔数组元素:

<input type="checkbox" ng-repeat="bool in V[0] track by $index" ng-model="V[0][$index]" />

请注意,由于数组中存在重复项,因此必须使用track by $index表达式。您还需要使用ngModel指令。

演示: http://plnkr.co/edit/87N6gpGOnLCCpTOvxJo0?p=preview