Angularjs将数组映射到另一个数组
Angularjs将数组映射到另一个数组
提问于 2015-05-05 04:04:40
我有两个数组，用户和雇用，如下所示：
Users = [{id:1, name: "ryan"}, {id:2, name:"Julie"}]
Employments = [{user_id: 1, title: "manager"}, {user_id: 2, title: "Professor"}]我想在ng-重复中显示就业数组，如下所示：
<li ng-repeat="employment in Employments">
{{employment.user.name}}
</li>如何将用户数组映射到就业数组？
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-05-05 04:15:30
如果希望基于id显示员工姓名，最简单的方法是将该id传递给函数并返回名称，如下所示
工作演示
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
如果要在雇用数组中嵌入用户数组，请尝试以下内容
$scope.Users = [{id: 1, name: "ryan"}, {id: 2, name: "Julie"}];
$scope.Employments = [{user_id: 1, title: "manager"},
{user_id: 2, title: "Professor"}
];通过添加用户属性来扁平化雇用数组的代码
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" }
]工作演示
更新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" } }
]工作演示
Stack Overflow用户
发布于 2015-05-05 06:27:20
如果您想将以下两个数组与模板完全匹配，则可以使用以下数组
Users = [{id:1, name: "ryan"}, {id:2, name:"Julie"}]
Employments = [{user_id: 1, title: "manager"}, {user_id: 2, title: "Professor"}]然后筑巢，就像：
<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>要避免那些括号显示在缓慢的页面加载上的风险，需要做的另外两件事情是使用ng绑定并用数据作为属性的前缀，因此使用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>我知道你除了名字什么都不需要，但是想出一个在内部使用外部循环的快速例子可能会很有帮助。如果您需要从内部引用外部ng的$index，这也是ng-init的情况，但这可能比您在这里所期望的要多。
Stack Overflow用户
发布于 2015-05-05 04:24:42
柱塞
这会将用户名排序到雇用数组中：
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：
<ul>
<li ng-repeat="employment in employments">
{{employment.name}}
</li>
</ul>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30044067
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号