Question

我在使用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的新手，所以我认为这一定是我犯过的一个非常愚蠢的错误。

谢谢

Answer 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来处理功能＆amp;数据。哪个没问题，但你错过了一定程度的嵌套。目前，您有$scope.myData.doClick()从服务器加载数据。然后你在最$scope.myData分配，最有可能出现问题。而是将其分配给$ scope.myData.result`并相应地更改HTML。

<强> Working example

Angular JS ng-repeat没有显示出来

1 个答案: