Question

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

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

件是一个如下所示的集合：[{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">

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

我已经尝试创建一个执行此操作的过滤器，但由于我没有看到如何在过滤器中访问范围，所以到目前为止我没有运气。

Answer 1

不确定这是否是最性感的角度方式，但我会在你的控制器内创建一个函数来进行查找。我还决定将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。 http://plnkr.co/edit/DsafIfMfARurNeVcl9Qd?p=preview

Answer 2

使用团队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>

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

2 个答案: