简体   繁体   中英

ngRepeat on another repeaters value's array

Using AngularJS .

Having the following JSON piece:

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

And the following corresponding 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.

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. Also you need to use ngModel directive.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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