AngularJS ng-repeat没有迭代我的JSON

时间:2017-09-05 05:56:15

标签: angularjs json

我已经构建了一个API来获取MongoDB的响应,它会以JSON数据的形式向我提供回复。我尝试了许多解决方案,在ng-repeat的帮助下迭代JSON数据上的循环,但它对我不起作用。这里是我的 HTML,JS 代码以及我从服务器获得的响应。

三江源

HTML

<div ng-controller="afterLoginController" >
    <button ng-click="view()" ng-show="view_buttons"> View Attendance </button> 
    <button ng-click="fill()" ng-show="view_buttons"> Fill Attendance </button>
    <button ng-click="edit()" ng-show="view_buttons"> Edit Attendance </button>

    {{ myStudents }}
    <table>
        <th>
            <tr>Roll No</tr>
            <tr> Name </tr>
            <tr> Attendance </tr>
        </th>


                    <td ng-repeat="records in myStudents">
                        <tr>  {{ records.rollno}}       </tr>
                        <tr>  {{ records.name}}         </tr>
                        <tr>  {{ records.attendance}}   </tr>
                    </td>

        </table>


</div>

AngularJS

app.controller("afterLoginController", function($http, $scope, $window) {

  $scope.view_buttons = true;

  $scope.view = function()
  {
    console.log('Inside view')
    $http.get("http://127.0.0.1:5000/get_student_name")
    .success(function(data){
      $scope.view_buttons = false;
      $scope.myStudents = data;
      console.log(data);    
      alert(JSON.stringify($scope.myStudents));

    })
    .error(function(err){
      console.log(err);
    })
  };

});

数据,即API的响应。

   [
 {"division":"A","name":"Alpesh Kantilal Vasani","rollno":"01","standard":"6","phone":"0000","_id":{"$oid":"59ad970db388963024c41a18"},"email":"alpeshvasaniav00@gmail.com"},
{"division":"A","name":"Aesrdg Kantilal Vasani","rollno":"02","standard":"6","phone":"0000","_id":{"$oid":"59ad9719b388963024c41a19"},"email":"alpeshvasaniav00@gmail.com"},
 {"division":"A","name":"Aesrdg Kantasdfgvbhgvilal Vasani","rollno":"03","standard":"6","phone":"0000","_id":{"$oid":"59ad9721b388963024c41a1a"},"email":"alpeshvasaniav00@gmail.com"},
 {"division":"A","name":"Aesrdg Wrfffghy Vasani","rollno":"04","standard":"6","phone":"0000","_id":{"$oid":"59ad9729b388963024c41a1b"},"email":"alpeshvasaniav00@gmail.com"},
 {"division":"A","name":"Aesrdg Wrfffghy Qqewfd","rollno":"05","standard":"6","phone":"0000","_id":{"$oid":"59ad9732b388963024c41a1c"},"email":"alpeshvasaniav00@gmail.com"},
 {"division":"A","name":"Aesrdg sdfret5rgf wertyhgb","rollno":"06","standard":"6","phone":"0000","_id":{"$oid":"59ad9739b388963024c41a1d"},"email":"alpeshvasaniav00@gmail.com"},
 {"division":"A","name":"Tsfgdb sdfret5rgf wertyhgb","rollno":"07","standard":"6","phone":"0000","_id":{"$oid":"59ad9743b388963024c41a1e"},"email":"alpeshvasaniav00@gmail.com"}
 ]

1 个答案:

答案 0 :(得分:2)

您拥有的上述HTML无效,您应该使用表格的正确语法

 <table>
      <thead>
        <tr>
          <th>division</th>
          <th>name</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="x in students">
          <td>{{x.division }}</td>
          <td>{{x.name}}</td>
        </tr>
      </tbody>
  </table>

修改

同样 .success() .error() 已使用1.4以上的angularjs版本折旧。您可以在 here

上阅读更多内容

所以你的控制器看起来应该是,

pageControllers.controller('HomeController', ['$scope', '$http', function($scope, $http) {
  $http.get('students.json').then(function(response) {
    $scope.students = response.data;
  });
}]);

DEMO