Can I use ng-repeat to iterate over an array in AngularJS?

Question

I am having some trouble with using AngularJS ng-repeat. Here is what I have:

<div ng:show="selected == 3">
    <div class="columns">
        <textarea rows="4" data-ng-model="modal.data.answer[1].text" cols="91">1</textarea>
    </div>
    <div class="columns">
        <label>Explanation</label>
        <textarea rows="2" data-ng-model="modal.data.answer[1].explanation" cols="91"></textarea>
    </div>
    <div class="columns">
        <div class="colx2-left">
            <span class="label">Correct</span>
            <input type="checkbox" data-ng-model="modal.data.answer[1].correct" class="check-box"><input type="hidden" value="false" name="Details[0].Correct">
        </div>
        <div class="colx2-right">
            <label>Image File</label>
            <input type="text" data-ng-model="modal.data.answer[1]image" class="full-width">
        </div>
    </div>
</div>

The modal.data.answer array will always have six elements. Can I use ng-repeat to create the HTML for these and have it repeat even the [x] numbers in the array and have it increment the number on the first line for "selected =" from 3 to 8 ?

As far as I know I can use <div ng-repeat="t in [3,4,5,6,7,8]"> </div> but how can I get the values of t into things like:

data-ng-model="modal.data.answer[1].text"

don't see why you can't do that.. ng:show and ng:repeat are not dependant on each other. so you should be able to do it.. give it a try. — Madushan
– Madushan, Commented Jul 29, 2013 at 8:51
I am not sure how to do it as I cannot see an example of something as simple as repeating over a range in the documentation: docs.angularjs.org/api/ng.directive:ngRepeat I wish the documentation was better. Fantastic product but the docs are a real let down for me :-( I guess I am not the only one as I see a huge number of comments and questions at the bottom of the page. — Alan2
– Alan2, Commented Jul 29, 2013 at 9:13

DotDotDot · Accepted Answer · 2013-07-29 09:58:59Z

26

your edit is heading in the right way, you can iterate through a list of integers easily, the you just use the value of you index like that

<div ng-repeat="t in [3,4,5,6,7,8]">
....
data-ng-model="modal.data.answer[t].text"
...

I made a fiddle if you want to try http://jsfiddle.net/DotDotDot/tweyS/ (the input field is just here to change the selected value, as in your code sample, in order to display the right fields)

have fun

edited Jul 29, 2013 at 9:58

answered Jul 29, 2013 at 9:29

DotDotDot

3,5662 gold badges22 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eassa Nassar · Accepted Answer · 2015-09-29 20:21:02Z

19

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys.

  <div ng-repeat="n in [42, 42, 43, 43] track by $index">
     {{n}}
  </div>

answered Sep 29, 2015 at 20:21

Eassa Nassar

1,3001 gold badge16 silver badges19 bronze badges

1 Comment

skwisgaar Over a year ago

omg, I spent half an hour trying to figure out why nothing is displayed and there were no errors in console. do you know why it is not default (track by)?

Collectives™ on Stack Overflow

Can I use ng-repeat to iterate over an array in AngularJS?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related