在表格列上重复 ng-repeat答案

【问题标题】：ng-repeat on table column在表格列上重复 ng-repeat
【发布时间】：2014-10-30 23:17:20
【问题描述】：

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

 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>

【问题讨论】：

标签： html angularjs angularjs-ng-repeat

【解决方案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>

【讨论】：

非常感谢。我是引导程序和角度的新手。所以我觉得有点难。但上面的事情奏效了。非常感谢。

【解决方案2】：

如果您声明您正在迭代的对象的键，您可以嵌套您的ng-repeats，这样您就不需要一遍又一遍地声明每一行。执行以下操作并嵌套它们：

在 Angular 应用中：

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

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

【讨论】：