使用 ng-repeat 对象数组中另一个对象的 id 属性按 id 查找对象答案

【问题标题】：Find object by id using another object's id property from array of objects with ng-repeat使用 ng-repeat 对象数组中另一个对象的 id 属性按 id 查找对象
【发布时间】：2015-02-25 01:56:03
【问题描述】：

我的范围内有以下数据模型。

        $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"}
        ];

我要做的是输出每天哪个员工关店，所以基于以上我的理想输出是。

Alex 星期一关门了

布拉德星期三关门了

Cam 星期四关门了

Alex 周五关门了

我遇到的问题是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>

让这个工作的最佳方法是什么？

【问题讨论】：

一个可能的解决方案是将您的员工模型更改为一个对象，其键是员工 ID。这将变为 $scope.staff = {1: {name: "Alex"}, etc}，然后在您的循环中，您可以通过执行 staff[closed.staffId].name 来简单地检索员工。这也消除了额外循环在数组中查找正确员工的必要性，因为您可以在地图中直接查找。

标签： javascript angularjs html angularjs-scope

【解决方案1】：

这部分是钱：

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

这可能是不言自明的，但我会详细说明以防万一。

您想显示单个员工的属性，所以我将从{{person.name}} 开始。
然后，我们需要获得一个变量person，所以我们需要使用ng-init 来创建它。
我们需要将工作人员数组过滤为一个成员，因此我们将其过滤为closed.staffID，使用“strict”参数设置为 true，以便我们仅获得 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];
};

【讨论】：

【解决方案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>

【讨论】：

【解决方案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

【讨论】：