Question

所以我有一个List，我从休息服务返回。现在，我希望以列格式显示此对象，现在在第一行中显示。所以它会是这样的：

 firstName:   Bob              Alice
 LastName:    Doe              Joe
 EmailId:     bob@xyz.com      alice@abc.com
 ContactNo:   123123           12444

那我怎么能在这里使用ng-repeat：

  <tr> 
     <th>firstName:</th>
     <td>('Name should be displayed here')</td>
  </tr>

Answer 1

您可以在td元素上使用ng-repeat。

<tr>
    <th>firstName:</th>
    <td ng-repeat="person in people">{{person.firstName}}</td>
</tr>
<tr>
    <td ng-repeat="person in people">{{person.lastName}}</td>
</tr>

Answer 2

如果声明要迭代的对象的键，则可以嵌套ng-repeats，这样就不需要反复声明每一行。执行以下操作并将其嵌套：

在Angular App中：

/*for the data*/
var personKeys = ['firstName', 'LastName', 'EmailID', 'ContactNo'];

var people = [
    {
     firstName: 'Bob',
     LastName: 'Doe',
     EmailID: 'bob@xyz.com',
     ContactNo: 123123
    },
    /* etc */
];

/*don't forget to reference this in your controller with something like: */
this.pKeys = personKeys;
this.people = people;

在您的HTML中

<table ng-controller='MyController as personList'>
    <tr ng-repeat='key in personList.pKeys'>
        <th>{{key}}</th>
        <td ng-repeat='person in personList.people'>
            {{person[key]}}
        </td>
    </tr>
</table>

这仍然存在迭代每个人| 属性 |的问题时代，而不仅仅是一次。我确信有一种聪明的方法可以只迭代一次，记忆并绘制表，而不必多次遍历整个数据集，这样运行时就不会像扩展数据那样快速增长。 / p>

表格栏上的ng-repeat

2 个答案: