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

All we need is an easy explanation of the problem, so here it is.

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

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply