AngularJS Ng-Repeat不迭代$Scope中的项目
AngularJS Ng-Repeat not iterating items in $Scope
我目前正在尝试从我的员工 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>
在我的索引上.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>
使用 $http
进行任何类型的 ajax 调用。
$http({
url: "http://localhost:8080/SGIntranetService/api/employee/",
method: "GET"
}).success(function (data) {
$scope.employees = data;
//console.log($scope.employees);
});;
由于您正在执行jQuery AJAX调用,因此Angular不知道它,因此当/如果其他事情强制摘要循环时,范围更新将发生。你不想要那个。
最简单的解决方法是使用 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();
})
你确实调用了控制器,所以也许你插入了两次控制器,所以有两个 ajax 调用。在这里查看 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调用很简单 - 您不必精确标头JavaScript 对象会自动转换为 JSON
- $http有成功方法和错误方法
- $http可以与$httpbackend服务一起使用,以模拟调用进行测试。我没有检查 $.ajax 是否可以使用它,但我在这里看到,人们正在询问这个问题。
- $http返回结果作为 promise,因此您可以在您的角度应用程序。
ajax 调用有一个优点,您可以在此调用中设置 async:true,$http不提供此功能。
一般来说,在使用 Angularjs 时,最好从 JQuery Ajax 迁移到 Angulars $http。但是,如果您想进行更深入的调用(例如使用 REST),请使用$resource服务。
这是$http文档。
您正在操纵角度范围之外的范围。
要解决您的问题,使用 $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;
});
}]);
- 正在将数据主题添加到所有项目
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 如何检查管道中未定义的项目
- AngularJS:ng之后,重复$scope值未按预期更新
- 有没有一种方法可以添加相同的项目val=“0”;4〃;到JavaScript中数组的每个对象
- 学生搜索项目jquery/javascript
- 如何获取不属于我项目的上一页的URL
- $ionicplatform内的$scope不;不起作用
- Dojo:访问dijit.form.Select中单击的项目
- 角度的项目列表 ng 重复,ng 单击显示全宽描述
- 我需要为我的朋友在这个项目上提供帮助
- 如何从 HTML 查询中删除项目
- 在Meteor项目中安装并包含npm模块后出错
- $scope.item don't在第页中向ng重复返回项目
- AngularJs $scope在离子项目中是未定义的
- AngularJS Ng-Repeat不迭代$Scope中的项目
- ng-repeat中的ng-options - 无法访问$scope中的选定项目
- 在 Angular 项目中迭代 JSON 响应以创建新的 $scope obj 我可以在应用程序中使用的
- AngularJS对于$scope中的项目$scope未定义的
- AngularJS将项目推送到数组的第一个或0索引$scope