javascript - 使用 ng-repeat 从对象数组中使用另一个对象的 id 属性通过 id 查找对象

标签 javascript angularjs html angularjs-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"}
        ];

我想要做的是输出每天哪个工作人员关闭商店,所以根据上述我的理想输出是。

亚历克斯周一关门了

布拉德周三关门了

卡姆周四关门了

亚历克斯周五关门了

我遇到的问题是关闭的商店数据仅包含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>

实现此功能的最佳方法是什么?

最佳答案

这部分是钱:

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

这可能是不言自明的,但我会详细说明以防有帮助。

  • 您想要显示单个员工的属性,因此我将从 {{person.name}} 开始。
  • 然后,我们需要获取一个变量 person,因此我们需要使用 ng-init 来创建它。
  • 我们需要将员工数组过滤为一名成员,因此我们使用设置为 true 的“strict”参数,通过 close.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(close.staffID)" 并将过滤逻辑移至 Controller 中。为此,您将注入(inject)过滤器过滤器(有趣的名称),如下所示:

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

然后使用这个函数:

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

关于javascript - 使用 ng-repeat 从对象数组中使用另一个对象的 id 属性通过 id 查找对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28690110/

相关文章:

javascript - <span>s inside <a> 不要在 Chrome 中触发 "onclick"事件

JavaScript 随机数

javascript - Angular.js 和 HTML/如何并排组合 2 个元素

jquery - 我无法选择为克隆动态创建的元素

jquery - 使用 tablesorter 设置列的默认排序

javascript - 如何仅在桌面上显示表格内容?

javascript - 我不明白为什么 "this"关键字没有像我预期的那样工作

javascript - YouTube 视频能否仅由数字组成,如果可以,如何匹配不仅由数字组成的字符串?

java - 我需要添加一个等待,直到我得到来自带有 selenium-java 的 Angular http 请求的响应

javascript - Angular $watch 不响应窗口大小调整