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

时间:2015-05-05 04:04:41

标签: javascript arrays angularjs

我有两个阵列,用户招聘,如下所示:

 collection.EnsureIndex(new IndexKeysBuilder()
 .Ascending("UrlList.Url"), IndexOptions.SetUnique(true));

我想在ng-repeat中显示Employments数组,如下所示:

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

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

4 个答案:

答案 0 :(得分:5)

如果您希望根据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

答案 1 :(得分:2)

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

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就是这种情况,但这可能比你在这里寻找的更多。

答案 2 :(得分:0)

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>

答案 3 :(得分:0)

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

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

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

希望能提供帮助。