CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
stonerichnau
stonerichnau

Reputation: 381

how to append items to the same row or line with ng-repeat

I'd like to append items to the same row with ng-repeat, but it seems to add the items on a new line. In the following example I'd like them to be on the same row like:

"John who is 25 years old. Jessie who is 30 years old. Johanna who is 28 years old."

The result is instead:

John who is 25 years old.
Jessie who is 30 years old.
Johanna who is 28 years old.

How can I accomplish that?

<div ng-init="friends = [
  {name:'John', age:25, gender:'boy'},
  {name:'Jessie', age:30, gender:'girl'},
  {name:'Johanna', age:28, gender:'girl'}
]">


<div ng-repeat="friend in friends">
    {{friend.name}} who is {{friend.age}} years old.
</div>

Stone

Upvotes: 7

Views: 19042

Answers (1)

Jay Shukla
Jay Shukla

Reputation: 5826

Try this

<div ng-repeat="friend in friends" style="float:left">
   {{friend.name}} who is {{friend.age}} years old.
</div>

OR

<span ng-repeat="friend in friends">
    {{friend.name}} who is {{friend.age}} years old.
</span>

By default DIV render as display:block and SPAN as display:inline

Upvotes: 12

Related Questions