Question

我的AngularJS应用程序中的服务有以下响应：

{
  "people": [
    {"id": "b3b38689", "name": "Tom"},
    {"id": "a62e603f", "name": "Dick"},
    {"id": "da703c62", "name": "Harry"}
  ],
  "groups": [
    {"name": "group 1", participants: ["b3b38689", "a62e603f"]},
    {"name": "group 2", participants: ["a62e603f", "da703c62"]}
  ]
}

最终这会映射到

$scope.data

然后，在我看来，我有：

<div data-ng-repeat="group in data.groups">
  <h1>{{group.name}}</h1>
  <p data-ng-repeat="participant in group.participants">...</p>
</div>

这是成功输出：

<div>
  <h1>group 1</h1>
  <p>...</p>
  <p>...</p>
</div>
<div>
  <h1>group 2</h1>
  <p>...</p>
  <p>...</p>
</div>

我想加入＆＃39; p＆＃39;标签＆＃34; people [n] .name＆＃34; id匹配的条目。

是否有人能够帮助我了解我将如何做到这一点？

此致

克里斯

Answer 1

您需要一种基于其ID查找某人的方法。有很多方法可以做到这一点，但一种方法是将人员数组转换为id字段为键的对象。 e.g。

$scope.people = {};
var peopleArray = $scope.data.people;
for (var i = 0; i < $scope.data.people.length; i++) {
    $scope.people[peopleArray[i].key] = peopleArray[i].name;
}

然后在你的html中你可以做到

<p>{{people[participant]}}</p>

Answer 2

按参与者ID过滤data.people：

<p data-ng-repeat="participant in group.participants">
  <span ng-bind="(data.people | filter:{id:participant})[0].name"></span>
</p>

Plunker

Answer 3

您可以使用以下过滤器：

 <p data-ng-repeat="participant in group.participants">
      {{(data.people | filter:search(participant))[0].name}}
 </p>

的javascript：

  $scope.search = function(name){
    return function(item)
    {
      return item.id == name;
    }
  };

以下是plunker链接：

http://plnkr.co/edit/oaHIw1c8U6l8YYIsaGfo?p=preview

AngularJS访问JSON数组[n] .property数据

3 个答案: