如何将项附加到同一行或符合NG-重复 [英] how to append items to the same row or line with ng-repeat

问题描述

我想追加项目在同一行与NG重复，但似乎增加一个新行的项目。在下面的例子中，我想他们是在同一行，如：

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:

约翰谁是25岁。杰西谁是30岁。约翰娜·谁是28岁。

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

结果是不是：

约翰谁是25岁。结果
 杰西谁是30岁。结果
 约翰娜谁是28岁。

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

我怎样才能做到呢？

<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>

石

推荐答案

试试这个

<div ng-repeat="friend in friends" style="float:left">
   {{friend.name}} who is {{friend.age}} years old.
</div>

或

<span ng-repeat="friend in friends">
    {{friend.name}} who is {{friend.age}} years old.
</span>

在默认情况下 DIV 渲染为显示：块和 SPAN 为显示：inline-block的

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