简体   繁体   English

另一个转发器值的数组上的ngRepeat

[英]ngRepeat on another repeaters value's array

Using AngularJS . 使用AngularJS

Having the following JSON piece: 具有以下JSON片段:

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

And the following corresponding HTML 以及以下对应的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> ...

How do i repeat and bind the boolean array to my checkbox inputs? 如何重复并将布尔数组绑定到复选框输入? The result would be 5 checkboxes in front of each skill's name, being selected or unselected depending on boolean values. 结果将是每个技能名称前面的5个复选框,根据布尔值被选中还是未选中。

I tried something like: 我尝试了类似的东西:

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

But that's a no-go.. 但这是不行的..

You can bind to boolean array elements like this in your case: 您可以在这种情况下绑定到布尔数组元素:

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

Note, that since there are duplicated items in array you have to use track by $index expression. 请注意,由于数组中存在重复项,因此必须使用track by $index表达式track by $index Also you need to use ngModel directive. 另外,您需要使用ngModel指令。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM