使用ng-repeat對象數組中的另一個對象的id屬性通過id查找對象

Question

我在我的範圍中有以下數據模型。

 $scope.staff = [ 
     {"id": "1","name": "Alex"}, 
     {"id": "2","name": "Brad"}, 
     {"id": "3","name": "Cam"} 
    ]; 
     $scope.closedShop =[ 
      {"day": "monday","staffID": "1"}, 
      {"day": "wednesday","staffID": "2"}, 
      {"day": "thursday","staffID": "3"}, 
      {"day": "friday","staffID": "1"} 
     ]; 

我想要做的是輸出哪個員工每天關閉店鋪，所以基於上面我的理想輸出會是。

亞歷週一收盤

店

布拉德關閉了店鋪週三

凸輪關閉了商店在週四

亞歷關閉了店上週五

我遇到的問題是closedShop數據只包含staffID，我怎麼能根據staff.id數據來查看這個人的姓名？

但是，我有一個下面的工作示例，這不是一個可擴展的解決方案，對於少數員工？

'use strict'; 
 
    var app = angular.module('app', []); 
 
     app.controller('MainCtrl', ['$scope', function ($scope) { 
 
      $scope.staff = [ 
 
      {"id": "1","name": "Alex"}, 
 
      {"id": "2","name": "Brad"}, 
 
      {"id": "3","name": "Cam"} 
 
     ]; 
 
      $scope.closedShop =[ 
 
       {"day": "monday","staffID": "1"}, 
 
       {"day": "wednesday","staffID": "2"}, 
 
       {"day": "thursday","staffID": "3"}, 
 
       {"day": "friday","staffID": "1"} 
 
      ]; 
 
     }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="MainCtrl"> 
 
     <div ng-repeat="closed in closedShop"> 
 
      <span ng-if="staff[0].id==closed.staffID">{{staff[0].name}}</span> 
 
      <span ng-if="staff[1].id==closed.staffID">{{staff[1].name}}</span> 
 
      <span ng-if="staff[2].id==closed.staffID">{{staff[2].name}}</span> 
 
      closed the shop on {{closed.day}} 
 
      </div> 
 
    </div> 
 
</div>

什麼是得到這個工作的最佳方式？

Answer 1

這部分錢：

<span ng-init="person = (staff | filter:{id:closed.staffID}:true)[0]">{{person.name}}</span> 

這也許不言自明，但我會詳細說明的情況下，它幫助。

• 你想要顯示個別職員的屬性，所以我會從{{person.name}}開始。
• 然後，我們需要得到一個變量person，所以我們需要使用ng-init來創建它。
• 我們需要將員工數組過濾爲一個成員，因此我們使用「strict」參數設置爲true來過濾掉closed.staffID，這樣我們只會得到id匹配的結果。由於過濾語法，此部分需要封裝在()中。
• 最後，我們使用[0]，因此person被設置爲匹配對象，該匹配對象將是數組中的第一個項目（項目0）。

var app = angular.module('app', []); 
 
     app.controller('MainCtrl', ['$scope', function ($scope) { 
 
      $scope.staff = [ 
 
      {"id": "1","name": "Alex"}, 
 
      {"id": "2","name": "Brad"}, 
 
      {"id": "3","name": "Cam"} 
 
     ]; 
 
      $scope.closedShop =[ 
 
       {"day": "monday","staffID": "1"}, 
 
       {"day": "wednesday","staffID": "2"}, 
 
       {"day": "thursday","staffID": "3"}, 
 
       {"day": "friday","staffID": "1"} 
 
      ]; 
 
     }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="MainCtrl"> 
 
     <div ng-repeat="closed in closedShop"> 
 
      <span ng-init="person = (staff | filter:{id:closed.staffID}:true)[0]">{{person.name}}</span> 
 
      closed the shop on {{closed.day}} 
 
     </div> 
 
    </div> 
 
</div>

你也可以做ng-init="person = getPerson(closed.staffID)"和移動過濾邏輯到控制器。要做到這一點，你會注入過濾器過濾器（有趣的名字），就像這樣：

app.controller('MainCtrl', ['$scope', 'filterFilter', function ($scope, filter) { 

，然後使用此功能：

$scope.getPerson = function(id) { 
    return filter($scope.staff, {id:id}, true)[0]; 
}; 

Answer 2

您可以添加到您的控制器功能獲取staffById。

$scope.getStaff = function(id){find and return} 

，並更改您的視圖：

<div ng-app="app"> 
    <div ng-controller="MainCtrl"> 
     <div ng-repeat="closed in closedShop"> 
      <span>{{getStaff(closed.staffID)}}</span> 
      closed the shop on {{closed.day}} 
      </div> 
    </div> 
</div> 

Answer 3

可能，這不是你所期望的，但適當地做這項工作：

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<div ng-app="app"> 
<div ng-controller="MainCtrl"> 
    <div ng-repeat="closed in closedShop"> 

     <span ng-repeat="s in staff" ng-if="s.id==closed.staffID"> 
      {{s.name}} 
     </span> 
     closed the shop on {{closed.day}} 
     </div> 
</div> 
</div> 
<script src="app.js"></script> 

JS ：

var app = angular.module('app', []); 
    app.controller('MainCtrl', ['$scope', function ($scope) { 
     $scope.staff = [ 
     {"id": "1","name": "Alex"}, 
     {"id": "2","name": "Brad"}, 
     {"id": "3","name": "Cam"} 
    ]; 
     $scope.closedShop =[ 
      {"day": "monday","staffID": "1"}, 
      {"day": "wednesday","staffID": "2"}, 
      {"day": "thursday","staffID": "3"}, 
      {"day": "friday","staffID": "1"} 
     ]; 
    }]); 

看到這個plunkr