CODEWITHSUNDEEP
angularjs
Shervin Asgari
Shervin Asgari

Reputation: 24499

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

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

Upvotes: 0

Views: 572

Answers (2)

downhand
downhand

Reputation: 395

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.

Upvotes: 1

A.B
A.B

Reputation: 20445

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>

Upvotes: 0

Related Questions