AngularJS：訪問/打印相關的集合

我在角度定義的兩個集合的屬性：AngularJS：訪問/打印相關的集合

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}] 團隊是一個集合，看起來像這樣： [{name:'TeamA',id:2},{name:'Team',id:3}]

在我遍歷集合件模板：

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

如何打印每件作品的隊名？

我已經嘗試創建一個過濾器來做到這一點，但因爲我沒有看到我如何在過濾器中訪問範圍，所以我沒有運氣。

來源

2013-06-02 rhoog

創建您的控制器內的功能給定一個團隊時， ID，返回一個團隊名稱，並將其綁定到輸出。 – Alan

不知道這是否是最性感的方法來做到這一點，但我會在控制器內部創建一個函數來執行查找。我還決定將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

來源

2013-06-02 22:40:05 Alan

謝謝，適合我！ – rhoog

使用團隊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>

來源

2013-06-02 22:58:09

AngularJS：訪問/打印相關的集合

回答

相關問題