Angular 重复 - 动态属性

Question

我在 table:

中有一个非常基本的 ng-repeat 数据

$scope.data = [ {
    version: 1,
    ID: 78,
    name: "Bulk 61",
    createdBy: "Master",
    email: "email@email.com",
    city: "New York",
    state: "New York",
    country: "Canada",
    address: "123 street road",
    type: "Something",
  },
  {
    version: 2,
    ID: 4,
    name: "Bulk 1221",
    createdBy: "Master22",
    email: "ema2il@email.com",
    city: "New York22",
    state: "New Yor22k",
    country: "Canada2",
    address: "123 str22eet road",
    type: "Somet2hing",
  }
];

事实是，我不知道对象属性是什么，因为我将在另一个对象中收到属性名称：

  $scope.properties = [
    "name",
    "type",
    "ID",
    "country",
    "email"
  ];

所以，实际上，根据我收到的属性，它可能是 item.country 而不是 item.name

因此，如果我在视图中构建 table，它将如下所示：

<table>
  <tr>
    <th ng-repeat="property in properties">{{property}}</th>
  </tr>
  <tr ng-repeat="item in data">
    <td>{{item.property[0]}}</td>
    <td>{{item.property[1]}}</td>
    <td>{{item.property[2]}}</td>
    <td>{{item.property[3]}}</td>
    <td>{{item.property[4]}}</td>
  </tr>
</table>

是否可以如我所愿？显然，如果我知道属性名称，则很容易将其放入视图中，但在这种情况下，它取决于我从 properties 对象接收到的内容。

我创建了一个 plnkr 来演示我想要实现的目标：http://plnkr.co/edit/LImqZuLzcvKsbHUEOOrX?p=preview

Answer 1

当然，只需设置第二个转发器来迭代属性名称并使用括号表示法：

<tr ng-repeat="item in data">
  <td ng-repeat="prop in properties">{{item[prop]}}</td>
</tr>

您可能想检查属性名称是否存在于当前迭代的 item

中

Angular 重复 - 动态属性

Angular Repeat - Dynamic properties

angularjs

angularjs-ng-repeat