如何使用 ng-repeat 将项目附加到同一行或同一行 [英] how to append items to the same row or line with ng-repeat

问题描述

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

约翰 25 岁.杰西 30 岁.约翰娜 28 岁."

结果是:

25 岁的约翰.
30 岁的杰西.
28 岁的约翰娜.

我怎样才能做到这一点?

<div ng-repeat="朋友中的朋友">{{friend.name}} 谁是 {{friend.age}} 岁.

石头

解决方案

试试这个

{{friend.name}} 谁是 {{friend.age}} 岁.

OR

{{friend.name}} 谁是 {{friend.age}} 岁.</span>

默认 DIV 渲染为 display:block 和 SPAN 渲染为 display:inline

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

解决方案

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

这篇关于如何使用 ng-repeat 将项目附加到同一行或同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！