Matthias Herrmann Matthias Herrmann - 7 months ago 17
Javascript Question

Angular JS Repeating through 2 Arrays In Unordered List

I got this html:

<ul class="demo-list-three mdl-list">
<li class="mdl-list__item mdl-list__item--three-line" ng-repeat="p in projects">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
<span>{{p}}</span>
<span class="mdl-list__item-text-body">
{{descriptions[0]}}
</span>
</span>
<span class="mdl-list__item-secondary-content">
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
</span>
</li>
</ul>


Projects and descriptions are Arrays in my Controller. Now I'm getting for each item in my Project Array a listitem, but how can I iterate the description as well?

Like in the first Iteration:

<span>{{descriptions[0]}}</span>


And in the next Iteration for the next p in Projects:

<span>{{descriptions[1]}}</span>


Thanks in regard!

Answer

Use track by in ng-repeat

<ul class="demo-list-three mdl-list">
    <li class="mdl-list__item mdl-list__item--three-line" ng-repeat="p in projects track by $index">
        <span class="mdl-list__item-primary-content">
            <i class="material-icons mdl-list__item-avatar">person</i>
            <span>{{p}}</span>
            <span class="mdl-list__item-text-body">
                {{descriptions[$index]}}
            </span>
        </span>
        <span class="mdl-list__item-secondary-content">
            <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
        </span>
    </li>
</ul>
Comments