AngularJS在表格中嵌套ng-repeat

时间：2017-03-28 07:54:06

标签： javascript angularjs json

我是AngularJs的新手，遇到了嵌套数组的Json数据问题。

我已将代码简化为简单的html文档，可以在下面找到。

第一个属性{{HelloMessage}}正在运行，并使用存储在属性HelloMessage中的字符串值进行填充，但ng-repeat不是。

在线查看之后，我发现我实际上在一个数组中有一个数组，所以假设我需要在ng-repeat中有一个ng-repeat，但它不起作用。我非常肯定我做错了很简单。

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title></title>
</head>
<body>
    <h1 ng-controller="myController">{{helloMessage}}</h1>
<div>
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>UserId</th>
                <th>DisplayName</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="stream in Data.Records">
                <tr ng-repeat="record in stream.Users">
                    <td>{{stream.Id}}</td>
                    <td>{{stream.User}}</td>
                    <td>
                        {{stream.Description}}
                    </td>
                    <!--<td>
                        <table>
                            <tbody>
                                <tr ng-repeat="b in value">
                                    <td>{{b.user}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>-->
                </tr>
            </tr>
        </tbody>
    </table>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<script type="text/javascript">
    angular.module('app', []).controller('myController',
                        function ($scope) {


                            $scope.helloMessage = "Hi";


                            $scope.Data = [{
                                Success: true,
                                ErrorMessage: null,
                                SuccessMessage: null,
                                Records: [{
                                    "CreatedBy": "Mickey Mouse",
                                    "CreatedDate": "2015-08-17T13:16:22.713",
                                    "CreatedDateDisplay": "17-08-2015",
                                    "Description": "Test 1",
                                    "Id": 7546798576985769857,
                                    "Name": "Test 1",
                                    "UpdatedBy": "",
                                    "UpdatedDate": null,
                                    "UpdatedDateDisplay": null,
                                    "User": null,
                                    "UserId": 0,
                                    "Users": [{
                                        "Users": [{
                                            "Id": 7546798576985769858,
                                            "UserId": 7546798576985769857,
                                            "DisplayName": "Daffy Duck"
                                        }, {
                                            "Id": 7546798576985769859,
                                            "UserId": 7546798576985769857,
                                            "DisplayName": "Pluto"
                                        }
                                        ],
                                        "User": "Bugs Bunny",
                                        "UserId": 7546798576985769857,
                                        "Name": "Test 2",
                                        "Description": "Test 2",
                                        "Id": 7546798576985769857,
                                        "CreatedBy": "Goofy",
                                        "CreatedDate": "2015-08-25T14:03:28.083",
                                        "UpdatedBy": "Porky Pig",
                                        "UpdatedDate": "2017-03-27T08:19:36.077",
                                        "CreatedDateDisplay": "25-08-2015",
                                        "UpdatedDateDisplay": "27-03-2017"
                                    }
                                    ]
                                }
                                ]
                            }
                            ];



                        });
</script>
</body>
</html>

Chrome控制台中没有错误

4 个答案:

答案 0 :(得分：1)

将ng-repeat重写为

<tr ng-repeat="stream in Data[0].Records[0].Users[0].Users">
</tr>

使用

    <td>{{stream.Id}}</td>
    <td>{{stream.UserId}}</td>
    <td>{{stream.DisplayName}}</td>

而不是

<td>{{stream.Id}}</td>
<td>{{stream.User}}</td>
<td>{{stream.Description}}</td>

＆＃13;
＆＃13; 
function myController($scope) {
  $scope.helloMessage = "Hi";
  $scope.Data = [{
    Success: true,
    ErrorMessage: null,
    SuccessMessage: null,
    Records: [{
      "CreatedBy": "Mickey Mouse",
      "CreatedDate": "2015-08-17T13:16:22.713",
      "CreatedDateDisplay": "17-08-2015",
      "Description": "Test 1",
      "Id": 7546798576985769857,
      "Name": "Test 1",
      "UpdatedBy": "",
      "UpdatedDate": null,
      "UpdatedDateDisplay": null,
      "User": null,
      "UserId": 0,
      "Users": [{
        "Users": [{
          "Id": 7546798576985769858,
          "UserId": 7546798576985769857,
          "DisplayName": "Daffy Duck"
        }, {
          "Id": 7546798576985769859,
          "UserId": 7546798576985769857,
          "DisplayName": "Pluto"
        }],
        "User": "Bugs Bunny",
        "UserId": 7546798576985769857,
        "Name": "Test 2",
        "Description": "Test 2",
        "Id": 7546798576985769857,
        "CreatedBy": "Goofy",
        "CreatedDate": "2015-08-25T14:03:28.083",
        "UpdatedBy": "Porky Pig",
        "UpdatedDate": "2017-03-27T08:19:36.077",
        "CreatedDateDisplay": "25-08-2015",
        "UpdatedDateDisplay": "27-03-2017"
      }]
    }]
  }];
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<div ng-app>
  <div ng-controller="myController">
    <h1>{{helloMessage}}</h1>
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>UserId</th>
          <th>DisplayName</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="stream in Data[0].Records[0].Users[0].Users">
          <td>{{stream.Id}}</td>
          <td>{{stream.UserId}}</td>
          <td>
            {{stream.DisplayName}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

首先，您必须将控制器定义为身体水平，如下所示。

<body ng-controller="myController">

您已将其定义为h1级别，因此无法访问。

我已按照以下方式对您的代码进行了更改。

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title></title

</head>
<body ng-controller="myController">
    <h1>{{helloMessage}}</h1>
    <div>
        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>UserId</th>
                    <th>DisplayName</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="stream in Data[0].Records[0].Users[0].Users">
                    <td>{{stream.Id}}</td>
                    <td>{{stream.UserId}}</td>
                    <td>{{stream.DisplayName}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>    

    <script type="text/javascript">
angular.module('app', []).controller('myController',
                            function ($scope) {
                                $scope.helloMessage = "Hi";
                                $scope.Data = [{
                                    Success: true,
                                    ErrorMessage: null,
                                    SuccessMessage: null,
                                    Records: [{
                                        "CreatedBy": "Mickey Mouse",
                                        "CreatedDate": "2015-08-17T13:16:22.713",
                                        "CreatedDateDisplay": "17-08-2015",
                                        "Description": "Test 1",
                                        "Id": 7546798576985769857,
                                        "Name": "Test 1",
                                        "UpdatedBy": "",
                                        "UpdatedDate": null,
                                        "UpdatedDateDisplay": null,
                                        "User": null,
                                        "UserId": 0,
                                        "Users": [{
                                            "Users": [{
                                                "Id": 7546798576985769858,
                                                "UserId": 7546798576985769857,
                                                "DisplayName": "Daffy Duck"
                                            }, {
                                                "Id": 7546798576985769859,
                                                "UserId": 7546798576985769857,
                                                "DisplayName": "Pluto"
                                            }],
                                            "User": "Bugs Bunny",
                                            "UserId": 7546798576985769857,
                                            "Name": "Test 2",
                                            "Description": "Test 2",
                                            "Id": 7546798576985769857,
                                            "CreatedBy": "Goofy",
                                            "CreatedDate": "2015-08-25T14:03:28.083",
                                            "UpdatedBy": "Porky Pig",
                                            "UpdatedDate": "2017-03-27T08:19:36.077",
                                            "CreatedDateDisplay": "25-08-2015",
                                            "UpdatedDateDisplay": "27-03-2017"
                                        }]
                                    }]
                                }];
                            });
    </script>
</html>

希望这会对你有所帮助。 感谢

答案 2 :(得分：0)

您的JSON似乎充满了数组。它可能会有所改进，但有一些方法可以在当前状态下显示它。您不需要嵌套ng-repeat：

<tbody>
    <tr ng-repeat="user in Data[0].Records[0].Users[0].Users">
        <td>{{user.Id}}</td>
        ...
</tbody>

Working JSFiddle of your code

答案 3 :(得分：0)

谢谢，谢谢大家的帮助。我已经使用了Geethu Jose的答案，但它仍然没有给我我正在寻找的东西，但经过多次头脑刮擦我确实找到了解决我问题的方法。我不需要使用数组占位符[0]，而是需要在不同的级别访问数组，因此我必须将代码更改为以下内容。 

<div ng-app>
    <div ng-controller="myController">
        <h1>{{helloMessage}}</h1>
        <table>
            <tbody>
                <tr ng-repeat="data in Data">
                    <td>
                        <table ng-repeat="records in data">
                            <thead>
                                <tr>
                                    <th>UserId</th>
                                    <th>User</th>
                                    <th>Name</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>{{records.UserId}}</td>
                                    <td>{{records.User}}</td>
                                    <td>{{records.Name}}</td>
                                    <td>
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>Id</th>
                                                    <th>UserId</th>
                                                    <th>DisplayName</th>
                                                </tr>
                                            </thead>
                                            <tr ng-repeat="streamUser in records.Users">
                                                <td>{{streamUser.Id}}</td>
                                                <td>{{streamUser.UserId}}</td>
                                                <td>{{streamUser.DisplayName}}</td>
                                            </tr>
                                        </table>
                                    </td>

                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
相关问题
最新问题