如何使用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:

我想用ng-repeat将项目附加到同一行,但它似乎在新行上添加项目。在下面的示例中,我希望它们位于同一行,如:

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

“约翰25岁。杰西30岁。约翰娜28岁。”

The result is instead:

结果是:

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

25岁的约翰。杰西,30岁。约翰娜,28岁。

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

1 个解决方案

#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

默认情况下,DIV渲染为display:block和SPAN as display:inline

#1