Question

我一直坚持用ng-repeat显示数据。我唯一能做的就是显示两个对象中的一个。每个客户都可以拥有多个用户。我试图在CustomerId的表中显示用户。 Working plunkr

app.controller('MainCtrl', function ($scope) {
var json = [
    {
        "CustomerId": "12xsd-344-fv23", "CompanyName": "ConocoPhillips",
        "Address": "1234 Main St", "City": "Redmond", "State": "WA", "Zip": "10999",
        "Email": "debra@example.com",
        "Users": [
             {
                 "FirstName": "Rudy", "LastName": "Sanchez", "CustomerId": "12xsd-344-fv23", "Customer": null,
                 "Email": "admin@energy.com", "EmailConfirmed": true, "PasswordHash": "AGtuCXr",
                 "SecurityStamp": "b0fca140", "PhoneNumber": null, "PhoneNumberConfirmed": false, "TwoFactorEnabled": false,
                 "LockoutEndDateUtc": null, "LockoutEnabled": false, "AccessFailedCount": 0, "Roles": [], "Claims": [], "Logins": [],
                 "Id": "49b5", "UserName": "admin"
             },
             {
                 "FirstName": "Troy", "LastName": "Benbow", "CustomerId": "12xsd-344-fv23", "Customer": null,
                 "Email": "tbenbow@yahoo.com", "EmailConfirmed": true, "PasswordHash": "AM8wL+iHaSG",
                 "SecurityStamp": "14f1483a-2e6f-41da-8307-a6c5945984a9", "PhoneNumber": null, "PhoneNumberConfirmed": false, "TwoFactorEnabled": false,
                 "LockoutEndDateUtc": null, "LockoutEnabled": true, "AccessFailedCount": 0, "Roles": [], "Claims": [], "Logins": [],
                 "Id": "9985b820-a45", "UserName": "tbenbow"
             }
        ]
    },
];
$scope.customers = json;

}）;

Answer 1

由于CustomerId 也是属性User，您可以在控制器中创建Users列表，然后在表格中循环它们：

  $scope.users = [];
  for(var i = 0; i < $scope.customers.length; i++) {
    for(var j = 0; j < $scope.customers[i].Users.length; j++) {

        //now you have access to customer properties with $scope.customers[i]
        var user = $scope.customers[i].Users[j];

        //example of adding CompanyName property
        user.CompanyName = $scope.customers[i].CompanyName;  

        //add user to $scope.users 
        $scope.users.push(user);
    }

  }

然后只需ng-repeat users：

<tr ng-repeat="user in users">
  <td>{{user.FirstName}} {{user.LastName}}</td>
  <td>{{user.UserName}}</td>
  <td>{{user.Email}}</td>
  <td>{{user.CustomerId}}</td>
  <td>{{user.CustomerName}}</td>
</tr>

这是updated plunker。

实际上，即使您需要Customer的父json部分的属性，也可以将该属性添加到正在重复的users数组中。

为视图准备数据通常会简化模板技巧（比如必须使用额外的ng-repeat ed元素构建表.IMO，这是首选。

Answer 2

此问题有两种可能的解决方案，第一种（在控制器中重新排列数据）已在另一个答案中提及。

另一种方法是我实现的嵌套循环：

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
  <script src="http://code.angularjs.org/1.1.4/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
 <table class="table table-bordered">
   <thead>
    <tr>
     <th>Name</th>
     <th>UserName</th>
     <th>Email</th>
     <th>CustomerId</th>
    </tr>
   </thead>
    <tbody ng-repeat="customer in customers">
      <tr ng-repeat="user in customer.Users">
        <td>{{user.FirstName}} {{user.LastName}} {{customer.CustomerId}}</td>
        <td>{{user.UserName}}</td>
        <td>{{user.Email}}</td>
        <td>{{user.CustomerId}}</td>
      </tr>
    </tbody>
 </table>
</body>
</html>

此解决方案快速且易于实施，使您可以同时访问用户和客户。我仍然建议在大多数情况下在控制器中重建数据，因为它可以保持您的视图干净并在控制器中保留任何真实的逻辑（Check here for an example of that）。

但是这个例子非常简单，您可以在嵌套的ng-repeat中轻松处理它。

如何使用ng-repeat向下钻取JSON

2 个答案: