json - 如何使用 ng-repeat 深入分析 JSON

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 的属性，您可以在 Controller ，然后在表中循环它们:

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

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

为 View 准备数据通常会简化模板技巧(例如必须使用额外的 ng-repeated 元素构建表格。IMO，这是更可取的。 p>