Angular JS ng-repeat没有出现答案

【问题标题】：Angular JS ng-repeat not showing upAngular JS ng-repeat没有出现
【发布时间】：2014-07-03 22:57:04
【问题描述】：

我在使用 Angular ng-repeat 指令时遇到了一些问题。附件是我的代码。

<!DOCTYPE html>
<html lang="en">

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

<body ng-app="myapp">

  <div ng-controller="MyController as me" >
    <button ng-click="myData.doClick(item, $event)">Send AJAX Request</button>
    <br/>
    <tr>
        <th>Test Suite Name</th>
        <th>Test Suite Key</th>
        <th>Date</th>
        <th>Start Time</th>
        <th>End Time</th>
        <th>Total Tests</th>
        <th>Passed</th>
        <th>Failed</th>
        <th>Quarantined</th>
    </tr>
    <tr ng-repeat="data in myData">
        <th>{{data.name}}</th>
        <th>{{data.plan_key}}</th>
        <th>{{data.start_date}}</th>
        <th>{{data.start_time}}</th>
        <th>{{data.end_time}}</th>
        <th>{{data.total_test}}</th>
        <th>{{data.test_passed}}</th>
        <th>{{data.test_failed}}</th>
        <th>{{data.test_quarantined}}</th>
    </tr>
    <h1>Data from server: {{myData[0].name}}</h1>
  </div>

  <script>
    var $received_data;

    var test = angular.module("myapp", []);
       //     .config(['$httpProvider', function($httpProvider) {
        //          $httpProvider.defaults.useXDomain = true;
        //          delete $httpProvider.defaults.headers.common['X-Requested-With'];
         //      }
         //    ])
        test.controller("MyController", function($scope, $http) {
            $scope.myData = {};
            $scope.myData.doClick = function(item, event) {

                var responsePromise = $http.get("http://127.0.0.1:5000/home");

                responsePromise.success(function(data, status, headers, config) {
                    console.log("ok")
                    $scope.myData = data.result;
                    //$scope.received_data = data.reault;
                });
                responsePromise.error(function(data, status, headers, config) {
                    alert("error?");
                });
            }


        } );
  </script>

</body>

</html>

所以基本上它得到一个 JSON 列表，我希望它以表格形式打印。我正在尝试使用带有tr ng-repeat="data in myData" 的ng-repeat 来做到这一点，但它不知何故没有出现。

但是，<h1>Data from server: {{myData[0].name}}</h1> 确实打印正确。

我是 AngularJS 的新手，所以我想这一定是我犯的一些非常愚蠢的错误。

谢谢

【问题讨论】：

我建议先对其进行格式化，以便您使用正确的表格 html
尝试将数据放入数组中，doClick 也可能会发生冲突。 ng-repeat 可能正在尝试对此做些什么。您的 myData.doClick 也被您的 http 响应覆盖。我建议你做这样的事情$scope.testSuite= {get: ..http.., data: [] }
您的表格标签丢失 ....

标签： html angularjs angularjs-directive angularjs-ng-repeat

【解决方案1】：

我认为这里有几个问题。

1您的 HTML 结构应该重新设计。理想情况下应该是这样的：

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Start Date</th>
      <th>Start Time</th>
      <th>End Time</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="data in myData.result">
      <td>{{data.name}}</td>
      <td>{{data.start_date}}</td>
      <td>{{data.start_time}}</td>
      <td>{{data.end_time}}</td>
    </tr>
  </tbody>
</table>

2 这是指@blowsies 评论。您正在使用相同的 $scope.myData 来处理函数和数据。这很好，但是您缺少嵌套级别。目前您有一个$scope.myData.doClick()，它从服务器加载数据。然后你将它分配给$scope.myData，这很可能有问题。相反，将其分配给 $scope.myData.result` 并相应地更改您的 HTML。

Working example

【讨论】：