stonerichnau stonerichnau - 1 month ago 9
AngularJS Question

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

Answer

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