Question

我正在Angular开展一个项目。我找到this question，但这不是我需要的。

我进行API调用并获得一个具有二十多个属性的JSON对象。因此，用户可能具有以下属性，然后是一些：

user.Name
user.Nickname
user.DOB
user.FavoriteColor
user.Address
...

我也有一个看起来像这样的数组。

$scope.ThePropertiesIWantToShow = [
                { propertyID: 1, displayValue: 'Name' },
                { propertyID: 3 displayValue: 'DOB' },
                { propertyID: 5 displayValue: 'Address' },

我有一个表格，我想显示这些数据，但我只想显示某些属性（上面数组中的属性）。如果我想在ThePropertiesIWantToShow中手动显示所有内容，我可能会这样做：

<tr ng-repeat="user in users">
    <td>{{user.Name}}</td>
    <td>{{user.DOB}{</td>
    <td>{{user.Address}{</td>
</tr>

但是，JSON数据和ThePropertiesIWantToShow数组都要大得多。我想知道如何使用ng-repeat来执行类似下面的伪代码，这样我就不必手动输入每个属性。另外，如果我需要进行更改，我可以更改数组，它会反映在多个地方：

for each user in users
     for each property in ThePropertiesIWantToShow
          <td>user.property</td>

根据之前链接的问题，我知道我可以做这样的事情来获取所有属性：

<tr ng-repeat="user in users">
    <td ng-repeat="(property, value) in user">{{value}}</td>
</tr>

但这给了我API调用的所有数据，我只想显示每个用户在数组中提供的属性。

Answer 1

你可能想要的是：

$scope.fields =['Name','DOB','Address'];

然后在视图中重复每行中的字段：

<tr ng-repeat="user in users">
    <td ng-repeat="field in fields">{{user[field]}}</td>
</tr>

Answer 2

如果我理解得很好，你就是想这样做：

在Angular控制器中声明此函数：

$scope.getUserProperty = function(user, property) {
    return user[property];
}

然后使用它来获取用户属性

<div ng-repeat="user in users">
  <div ng-repeat="p in properties">
      {{getUserProperty(user, p.displayValue)}}
  </div>
</div>

Working demo on JSFiddle

如何在仅提取数组中指定的属性的同时迭代数据集？

2 个答案: