Getting the index from ng-repeat outside another ng-repeat

Question

I am trying to write the following code with two ng-repeat.

<td class="researched" colspan="2" ng-repeat="tech in userCtrl.chosenTechs1" title="{{tech.name}}">{{tech.name}}</td>
<td class="available" colspan="2" title="6 trade needed to learn level 1 tech" ng-if="5 > userCtrl.chosenTechs1.length" >6</td>
<td class="available" colspan="2" title="6 trade needed to learn level 1 tech" ng-if="4 > userCtrl.chosenTechs1.length" >6</td>
<td class="available" colspan="2" title="6 trade needed to learn level 1 tech" ng-if="3 > userCtrl.chosenTechs1.length" >6</td>
<td class="available" colspan="2" title="6 trade needed to learn level 1 tech" ng-if="2 > userCtrl.chosenTechs1.length" >6</td>
<td class="available" colspan="2" title="6 trade needed to learn level 1 tech" ng-if="1 > userCtrl.chosenTechs1.length" >6</td>

I have tried this, but didn't work

<td class="researched" colspan="2" ng-repeat="tech in userCtrl.chosenTechs1" title="{{tech.name}}">{{tech.name}}</td>
<td class="available" colspan="2" title="6 trade needed to learn level 1 tech" ng-repeat="5 > $index">6</td>

Bascially what I want is to get the length of userCtrl.chosenTechs1, and if the length is less than 5, I want to repeat it until it reaches 5

You are ok with $index but in the other tds you are out of the scope . So you have to change your logic . — katmanco, Feb 22 '15 at 21:10

downhand · Accepted Answer · 2015-02-22T21:31:36.670

1

ng-repeat="5 > $index"

This is a bad approach. You need to have another list/array to iterate. Prepare the second array in the controller, make it empty in case the length of the first one is greater than or equal to 5, so it will disappear in that case. You shouldn't include too much magic in what data to show in the html, that logic belongs to your controller.

edited Feb 22 '15 at 21:31

answered Feb 22 '15 at 21:05

downhand

395
1
9
23

Is there any other way to repeat X times without having a collection? – Shervin Asgari Feb 23 '15 at 09:23
There is a good solution here: http://stackoverflow.com/questions/11873570/angularjs-for-loop-with-numbers-ranges http://jsfiddle.net/28kvvfjy/9/ – downhand Feb 23 '15 at 14:09
I created separate collections – Shervin Asgari Feb 25 '15 at 16:33

A.B · Answer 2 · 2015-02-22T21:11:03.537

0

you can use ng-repeat-start and ng-repeat-end with div as td's wrapper (as an hack)

 <td class="researched" colspan="2" 
     ng-repeat-start="tech in userCtrl.chosenTechs1" 
 title="{{tech.name}}">{{tech.name}}</td>
   <div ng-repeat-end> 
    <td class="available" colspan="2" title="6 trade needed to learn level 1 tech" 
     ng-repeat="5 > $index">6</td>
 </div>

edited Feb 22 '15 at 21:11

answered Feb 22 '15 at 20:58

A.B

20,110
3
37
71

Getting the index from ng-repeat outside another ng-repeat

2 Answers2