javascript Angularjs 将数组映射到另一个数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30044067/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs map array to another array
提问by Ryan.lay
I have two arrays, Usersand Employmentslike so:
我有两个数组，Users和Employments，如下所示：
Users = [{id:1, name: "ryan"}, {id:2, name:"Julie"}]
Employments = [{user_id: 1, title: "manager"}, {user_id: 2, title: "Professor"}]
I'd like to display the Employments array in an ng-repeat like so:
我想在 ng-repeat 中显示 Employments 数组，如下所示：
<li ng-repeat="employment in Employments">
{{employment.user.name}}
</li>
How do I map the Users array to the Employments array?
如何将 Users 数组映射到 Employments 数组？
回答by Nidhish Krishnan
If you want the employee name to get displayed based on id, the simplest way is just pass that id to a function and return the name, like as shown below
如果您希望根据 id 显示员工姓名，最简单的方法是将该 id 传递给函数并返回姓名，如下所示
html
html
<div ng-app='myApp' ng-controller="ArrayController">
<li ng-repeat="employment in Employments">{{getEmployeeName(employment.user_id)}}
</li>
</div>
script
脚本
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;
}
};
};
});
UPDATE 2
更新 2
If you want to embed the User array in the Employments array, try the following stuff
如果要将 User 数组嵌入到 Employments 数组中，请尝试以下内容
$scope.Users = [{id: 1, name: "ryan"}, {id: 2, name: "Julie"}];
$scope.Employments = [{user_id: 1, title: "manager"},
{user_id: 2, title: "Professor"}
];
code for flattening Employments array by adding User properties
通过添加用户属性扁平化 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;
}
});
});
Output
输出
$scope.Employments = [ { user_id: 1, title: "manager", name: "ryan" },
{ user_id: 2, title: "Professor", name: "Julie" }
]
UPDATE 3
更新 3
Code for making a nested employee structure like as shown below from $scope.Usersand $scope.Employments
用于制作如下所示的嵌套员工结构的代码来自$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);
});
Output
输出
[ { title: "manager", user: { "id": 1, "name": "ryan" } },
{ title: "Professor", user: { "id": 2, "name": "Julie" } }
]
回答by Andrew Clavin
If you wanted to match up the two following arrays purely with a template you could take the following arrays
如果您想将以下两个数组纯粹与模板匹配，您可以采用以下数组
Users = [{id:1, name: "ryan"}, {id:2, name:"Julie"}]
Employments = [{user_id: 1, title: "manager"}, {user_id: 2, title: "Professor"}]
And nest a repeat like:
并嵌套重复如下：
<li ng-repeat="employment in Employments">
<div ng-repeat="user in Users" ng-if="user.id === employment.user_id" >
{{user.name}}:{{employment.title}}
</div>
</li>
Two more nice little thing to do to avoid any risk of getting those brackets showing on a slow page load is to use the ng-bind and prefix the attributes with data so its with the html spec
为了避免在缓慢的页面加载中显示这些括号的任何风险，还有两件不错的小事是使用 ng-bind 并在属性前加上数据前缀，使其与 html 规范
<li data-ng-repeat="employment in Employments">
<div data-ng-repeat="user in Users" data-ng-if="user.id === employment.user_id" >
<span data-ng-bind="user.name"></span>:<span data-ng-bind="employment.title"></span>
</div>
</li>
I know you didn't have the need for anything but the name, but figured a quick example of using the outer loop in the inner still could be helpful. Also this would be the case for ng-init if you needed to reference the the $index of the outer ng-repeat from the inner, but that might be more than you're looking for here.
我知道除了名称之外您不需要任何东西，但是想出一个在内部仍然使用外部循环的快速示例可能会有所帮助。如果您需要从内部引用外部 ng-repeat 的 $index，那么 ng-init 也是这种情况，但这可能比您在这里寻找的要多。
回答by tpie
This sorts the users names into the employments array:
这将用户名排序到就业数组中：
var sortUsers = function() {
var i = 0;
for (i; i < $scope.users.length; i++) {
console.log($scope.users[i].id)
for(var z = 0; z < $scope.employments.length; z++) {
if($scope.employments[z].user_id === $scope.users[i].id) {
$scope.employments[z].name = $scope.users[i].name;
}
}
}
}
HTML:
HTML：
<ul>
<li ng-repeat="employment in employments">
{{employment.name}}
</li>
</ul>
回答by Ryan Exlay
I dealt similar problem yesterday. If you want to use js, have to loop twice. I recommend to use the best way is to select in one query by join table if data come from single database.
我昨天处理了类似的问题。如果要使用js，必须循环两次。如果数据来自单个数据库，我建议使用最好的方法是通过连接表在一个查询中选择。
You select User by one query, and Employment for another query in database. Then, twice ng-repeat to re-arrange. Here is my solution.
您通过一个查询选择用户，并在数据库中为另一个查询选择就业。然后，两次 ng-repeat 重新排列。这是我的解决方案。
select users.*, employments.title from `users` inner join `employments` where users.id = employments.user_id;
Hope be be helpful.
希望有所帮助。
