Menu
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
872
The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
But ng-repeat is not the right thing to use when you have large datasets as it involves heavy DOM manipulations. And you should consider using ng-repeat with pagination. You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
ng-repeat creates a new scope for each iteration so will not perform as well as ng-options. For small lists, it will not matter, but larger lists should use ng-options. Apart from that, It provides lot of flexibility in specifying iterator and offers performance benefits over ng-repeat.
Note: The $index variable is used to get the Index of the Row created by ng-repeat directive. Each row of the HTML Table consists of a Button which has been assigned ng-click directive. The $index variable is passed as parameter to the GetRowIndex function.
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
107
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
