AngularJS Ng-Repeat 不迭代 $Scope 中的项目

Question

我目前正在尝试从我的员工 API 中读取一个 Json 对象数组，它返回以下内容，

 [
            {
                "Id": "00162c3a-2b70-4f50-80e8-6fee463cffdb",
                "EmployeeNumber": 123,
                "FirstName": "John",
                "Surname": "Smith",
                "JobTitle": "Developer",
                "Email": "jsmith@company.co.uk",
                "PhoneNumber": "89345 242397",
                "ExtensionNumber": "2895",
                "MobileNumber": "12343451234"
            },
            {
                "Id": "048b73e7-a84d-439b-97c2-0c611a076eb0",
                "EmployeeNumber": 125,
                "FirstName": "Billy",
                "Surname": "Smith",
                "JobTitle": "Developer",
                "Email": "bsmith@company.co.uk",
                "PhoneNumber": "89345 242397",
                "ExtensionNumber": "2896",
                "MobileNumber": "12343451223"
            }
 ]

在我的 AngularJs 应用程序中，我有一个如下所示的控制器，

'use strict';
app.controller('directoryController', ['$scope', 'Page', function ($scope, Page) {
    Page.setTitle('Employee Directory');

    $.ajax({
        url: 'http://localhost:8080/SGIntranetService/api/employee/',
        type: 'GET',
    }).success(function (data) {
        $scope.employees = data;

    //console.log($scope.employees);
    });
}]);

返回控制台时，所有对象似乎都在那里。还要注意，出于某种原因，目前我的 Ajax 调用正在向 Web API 发出两个请求。（不确定这是为什么）

最后，我尝试在局部视图 (ng-view) 中使用它，只使用其中一个属性进行测试，直到它开始工作，然后再添加其余的。

<div class="container" ng-controller="directoryController">
<div ng-repeat="employee in employees">
    <h3>{{employee.FirstName}}</h3>
</div>

在我的 index.html（母版页）上，我有以下内容。

<div class="site-content">
    <div class="content-header">
        <div class="container" ng-controller="pageController">
            <h1 class="page-title">{{Page.title()}}</h1>
        </div>
    </div>
    <div class="container">
        <div data-ng-view="">

        </div>
    </div>
</div>

Answer 1

您正在操作 angular 范围之外的范围。

要解决您的问题，使用 $apply 可能不是一个好的选择。

改为使用 $resource :

 'use strict';
 app.controller('directoryController', ['$scope', '$resource', 'Page', function ($scope, '$resource', Page) {
   Page.setTitle('Employee Directory');

   $resource('http://localhost:8080/SGIntranetService/api/employee/')
      .query()
      .then(function (data) {
          $scope.employees = data;
   });
}]);

Answer 2

使用 $http 进行任何类型的 ajax 调用。

$http({
   url: "http://localhost:8080/SGIntranetService/api/employee/", 
   method: "GET"
}).success(function (data) {
    $scope.employees = data;

//console.log($scope.employees);
});;

Answer 3

你确实调用了控制器，所以你可能两次插入控制器，所以有两个 ajax 调用。查看 here 以比较 ajax 和 http 调用。当使用 $http 而不是 ajax 时，您可以像这样重写代码：

app.controller('directoryController', ['$scope', 'Page','$http', function ($scope, Page,$http) {
    Page.setTitle('Employee Directory');

$http({
    url: 'http://localhost:8080/SGIntranetService/api/employee/',
    method: 'GET',
}).success(function (data) {
    $scope.employees = data;
});
}]);

您可以同时使用 ajax 和 $http 调用。 $http 的优点是：

编写 $http 调用很简单 - 你不必精确 headers javascript objects 自动转换为 JSON
$http有成功方法和错误方法
$http 可以与$httpbackend 服务一起使用，模拟调用以进行测试。我没有检查 $.ajax 是否适用于此，但我看到 here，有人在问这个问题。
$http returns 结果作为承诺，所以你可以在您的 angular 应用程序。

ajax 调用有一个优点，你可以在这个调用中设置 async: true 而 $http 没有提供这个。

一般来说，在使用 Angularjs 时，最好从 JQuery Ajax 迁移到 Angulars $http。但是如果你想要更深入的调用（比如使用 REST），请使用 $resource 服务。

这里是 $http 文档。

Answer 4

由于您正在进行 jQuery AJAX 调用，Angular 没有意识到它，因此范围更新将会发生 when/if 其他一些东西会强制摘要循环.你不想要那个。

最简单的解决方法是使用 Angular 的 $http 服务来执行 AJAX 调用：

$http.get("http://localhost:8080/SGIntranetService/api/employee/")
     .success(function (data) {
         $scope.employees = data;
     }

不要忘记将 $http 服务注入控制器：

app.controller('directoryController', 
              ['$scope', 'Page', '$http', function ($scope, Page, $http) {

快速修复

如果您仍然希望继续使用 jQuery（无论出于何种原因），您可以使用 $apply() 强制范围摘要：

$.ajax({
        url: 'http://localhost:8080/SGIntranetService/api/employee/',
        type: 'GET',
    }).success(function (data) {
        $scope.employees = data;
        $scope.$apply();
    })

AngularJS Ng-Repeat 不迭代 $Scope 中的项目

AngularJS Ng-Repeat not iterating items in $Scope

html

javascript

json

angularjs

angularjs-ng-repeat

快速修复