Angular Js ng-repeat无法使用ajax从json数组中获取输出

Question

我正在使用具有 ajax 的 Angular Js，但使用 ng-repeat 无法从 json 数组获取输出。警报获取 [Object object]... 等等，但通过使用 $scope.names= response[0].id; ，获得“1” id 警报。我需要获取表中的所有数据。有什么方法可以获取表格中的所有数据，而且我没有在控制器中使用$http，因为它不能在移动浏览器中工作，但在桌面上工作，我不知道为什么？请帮忙！

JS

var app = angular.module('studentApp',[]);
app.controller('StudentCntrl', function($scope){

$.ajax({
    url : '/fetchAllData',
    type : 'GET',
    success : function(response){
        $scope.names=response;
        //alert($scope.names);(This is working)
          } 
     });
});

JSP

<div ng-app="studentApp" ng-controller="StudentCntrl">

      <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>ID</th>
              <th>NAME</th>
              <th>EMAIL</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="x in names">
              <td>{{x.id}}</td>
              <td>{{x.name}}</td>
              <td>{{x.email}}</td>

            </tr>
          </tbody>
        </table>
      </div>

Json

[{"id":"1","name":"abdul","email":"a@gmail.com"},{"id":"2","name":"pratyush","email":"p@gmail.com"},{"id":"3","name":"ankit","email":"a@gmail.com"},{"id":"45","name":"kjhj","email":"kjhkj"},{"id":null,"name":null,"email":null},{"id":null,"name":null,"email":null},{"id":null,"name":null,"email":null},{"id":"trffs","name":null,"email":null},{"id":"afa","name":"sdgfdsg","email":"dsagdsg"},{"id":"12","name":"pppp","email":"hjk,gh"}]

Answer 1

当使用 $ajax 调用更新范围时（您应该使用 $http），您必须使用 $scope apply 来更新您的绑定。

$scope.$apply(function(){
    $scope.names = response.data;
});

Answer 2

使用 $http 代替 ajax 调用，如下所示

var app = angular.module('studentApp', []);
app.controller('StudentCntrl', function($scope,$http) {
    $http.get('data.json').then(function (response){
                  console.log(response.data.pages);
                $scope.names = response.data;
        });
});

这是工作 DEMO