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 中显示就业数组：

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

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

Answer 1

如果您想纯粹用模板匹配以下两个数组，您可以使用以下数组

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-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>

我知道您除了名称之外什么都不需要，但想了一个在内部使用外部循环的快速示例仍然可能会有所帮助。如果您需要从内部引用外部 ng-repeat 的 $index，那么 ng-init 也是这种情况，但这可能比您在这里寻找的要多。

Answer 2

如果您希望员工姓名根据 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 数组嵌入到 Employs 数组中，请尝试以下方法

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

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

Answer 3

我昨天处理了类似的问题。如果要使用js，必须循环两次。 如果数据来自单个数据库，我建议使用最好的方法是通过连接表在一个查询中进行选择。

您通过一个查询选择用户，并为数据库中的另一个查询选择就业。然后，两次 ng-repeat 重新排列。这是我的解决方案。

select users.*, employments.title from `users` inner join `employments` where users.id = employments.user_id; 

希望对你有所帮助。

Answer 4

Plunker

这会将用户名排序到就业数组中：

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>