javascript - Angularjs 将数组映射到另一个数组

Question

我有两个数组，Users 和 Employments，如下所示:

Users       = [{id:1, name: "ryan"}, {id:2, name:"Julie"}]
Employments = [{user_id: 1, title: "manager"}, {user_id: 2, title: "Professor"}]

我想像这样在 ng-repeat 中显示 Employments 数组:

<li ng-repeat="employment in Employments">
  {{employment.user.name}}
</li>

如何将 Users 数组映射到 Employments 数组？

Answer 1

如果你希望根据id显示员工姓名，最简单的方法就是将id传递给一个函数并返回姓名，如下所示

Working Demo

html

<div ng-app='myApp' ng-controller="ArrayController">
    <li ng-repeat="employment in Employments">{{getEmployeeName(employment.user_id)}}
    </li>
</div>

脚本

var app = angular.module('myApp', []);
app.controller('ArrayController', function ($scope) {
    $scope.Users = [{
        id: 1,
        name: "ryan"
    }, {
        id: 2,
        name: "Julie"
    }];

    $scope.Employments = [{
        user_id: 1,
        title: "manager"
    }, {
        user_id: 2,
        title: "Professor"
    }];

    $scope.getEmployeeName = function (empId) {
        for (var i = 0; i < $scope.Users.length; i++) {
            if ($scope.Users[i].id === empId) {
                return $scope.Users[i].name;
            }
        };
    };
});

更新 2

如果您想将 User 数组嵌入到 Employments 数组中，请尝试以下操作

$scope.Users = [{id: 1, name: "ryan"}, {id: 2, name: "Julie"}];

$scope.Employments = [{user_id: 1, title: "manager"}, 
                      {user_id: 2, title: "Professor"}
                     ];

通过添加用户属性来展平 Employments 数组的代码

angular.forEach($scope.Users, function (user, userIndex) {
    angular.forEach($scope.Employments, function (employee, employeeIndex) {
        if (employee.user_id === user.id) {
            employee.name = user.name;
        }
    });
});

输出

$scope.Employments = [ { user_id: 1, title: "manager", name: "ryan" }, 
                       { user_id: 2, title: "Professor", name: "Julie" } 
                     ]

Working Demo

更新 3

用于制作嵌套员工结构的代码，如下所示，来自 $scope.Users 和 $scope.Employments

$scope.employees = [];
angular.forEach($scope.Employments, function (employee, employeeIndex) {
    var employeeObject = {};
    employeeObject.title = employee.title;
    angular.forEach($scope.Users, function (user, userIndex) {
        if (employee.user_id === user.id) {
            employeeObject.user = user;
        }
    });
    $scope.employees.push(employeeObject);
});

输出

[ { title: "manager", user: { "id": 1, "name": "ryan" } }, 
  { title: "Professor", user: { "id": 2, "name": "Julie" } } 
]

Working Demo