ng-repeat over an array of objects

Question

Using ng-repeat, how would I loop through the following:

var  messages : [
      {text:"Standard Message"},
      {text:"Success Message!", type:"success"},
      {text:"Alert Message!", type : "alert"},
      {text:"secondary message...", type : "secondary"}
    ]

I've tried:

<p ng-repeat="message in messages">{{message}}</p>

and it doesn't seem to work, how would I do this?

I am not sure why this question has been marked off-topic as the OP has shown 'what he is trying to do' by showing the html markup, and the accepted answer shows what he was missing. Although primitive, I happen to see such questions all the time on SO, and rightfully so, as the OP has missed something very tiny on which he has spent a lot of time, and other people are there to point out the tiny mistake. This question is not vague imho to be marked off-topic. — Syed Waqas
– Syed Waqas, Commented Jan 15, 2017 at 15:19

Dor Cohen · Accepted Answer · 2013-06-26 17:59:57Z

38

You need to insert your messages array into the $scope:

$scope.messages = [
      {text:"Standard Message"},
      {text:"Success Message!", type:"success"},
      {text:"Alert Message!", type : "alert"},
      {text:"secondary message...", type : "secondary"}
    ]

and then use it as following:

<p ng-repeat="message in messages">{{message.text}}</p>

answered Jun 26, 2013 at 17:59

Dor Cohen

17.1k24 gold badges97 silver badges161 bronze badges

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

3 Comments

wesbos Over a year ago

Weird, now {{message}} is even working. I was looking to dump out the object. Oh well, works now, not sure what was wrong..

Dor Cohen Over a year ago

@ChrisChevalier I don't understand your question, can you elaborate?

Mawg Over a year ago

He doesn't understand for X in Y. @DorCohen, it is looping over the array. For each message in $scope.messages - it isn't singular/plural. You can use any variable (although it is a quite common convention). For instance, it could have been written <p ng-repeat="x in messages">{{x.text}}</p>

Collectives™ on Stack Overflow

ng-repeat over an array of objects

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related