AngularJS:访问/打印相关集合的属性

我在Angular中定义了两个集合：

app.controller('MainCtrl', function($scope, PieceService, TeamService) {
  PieceService.query(function(data){
    $scope.pieces = data;
  });
  TeamService.query(function(data){
    $scope.teams = data;
  });
});

pieces是一个如下所示的集合：

[{name:'Petra'，team_id:2}，{name:'Jan'，team_id:3}]

team是一个如下所示的集合：

[{name:'TeamA'，id:2}，{name:'team'，id:3}]

在模板中，我正在迭代片段集合：

<tr data-ng-repeat="piece in pieces">

如何打印每件作品的团队名称？

---

我曾尝试创建一个过滤器来实现这一点，但由于我不知道如何访问过滤器中的作用域，我目前运气不佳。

不确定这是否是最性感的方式，但我会在控制器内创建一个函数来执行查找。我还决定将team_id缓存到名称查找中，但我意识到，对于2x2搜索来说，这并不是必需的

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.pieces = [{name:'Petra',team_id:2},{name:'Jan',team_id:3}];
    $scope.teams = [{name:'TeamA',id:2},{name:'TeamB',id:3}];

    var idcache = {};

    $scope.getTeam = function(id) {
      if(idcache[id]) {
        return idcache[id];
      } 

      //cache this
      $scope.teams.forEach(function(team) {
        idcache[team.id] = team.name;
      });

      return idcache[id];

    }        
});

我用示例代码创建了一个plunkr。

---

使用团队ID作为对象键，如下所示：

$scope.teamLookup = {}

// do this in the query callback
angular.forEach($scope.teams, function(val, key){
    $scope.teamLookup[val.id] = val.name
});

<tr data-ng-repeat="piece in pieces">
    <td>{{teamLookup[piece.team_id]}}</td>
    <td>{{piece.name}}</td>
</tr>

然后，您的标记可以如下所示：

$scope.teamLookup = {}

// do this in the query callback
angular.forEach($scope.teams, function(val, key){
    $scope.teamLookup[val.id] = val.name
});

<tr data-ng-repeat="piece in pieces">
    <td>{{teamLookup[piece.team_id]}}</td>
    <td>{{piece.name}}</td>
</tr>

{{teamLookup[piece.team_id]}
{{piece.name}

在控制器内创建一个函数，当给定团队ID时，该函数返回团队名称，并将其绑定到输出。