我有一个控制器和角度视图。 我通过ajax调用一个函数从服务器获取数据,然后将其加载到数组中,然后用ng-repeat绑定它,它加载数据但不会显示,直到我点击任何按钮。 以下是代码 图。
<table class="table table-striped" >
<thead>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Designation</th>
<th>Mobile No</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="item in emplist">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.designation}}</td>
<td>{{item.mobile}}</td>
</tr>
</tbody></table>
控制器。
angular
.module('MyApp.ctrl.crud', [])
.controller('loginController',[
'$scope',
function ($scope) {
$scope.emplist = [];
$scope.load = function () {
$.ajax({
type: 'GET',
contentType: 'application/json; charset=utf-8',
url: '/Home/getList',
success: function (data) {
$scope.emplist = data;
console.log($scope.emplist);
}
});
}
$scope.load();
答案 0 :(得分:5)
你应该尝试使用角度为$ j的ajax服务。如果这样做,您将不需要显式执行任何操作,例如 $ scope.load()。这可能会发生,因为只有在用户操作之后才会刷新范围,并且只有它具有新的范围值。但是在$ http的情况下,当获取响应并将其存储在$ scope中时,作用域会自动刷新。
或者,如果您不想将代码更改为$ http,那么在成功回调$ .ajax时,请执行$ scope。$ apply(),如下所示:
success: function (data) {
$scope.emplist = data;
$scope.$apply(); // or $scope.$digest();
console.log($scope.emplist);
}
答案 1 :(得分:4)
你正在超越棱角分明。您应该考虑实现$ http.get(而不是使用$ .ajax,看起来像jquery)。
如果你必须使用$ .ajax,那么你需要告诉angular to $ apply如下:
$scope.load = function () {
$.ajax({
type: 'GET',
contentType: 'application/json; charset=utf-8',
url: '/Home/getList',
success: function (data) {
$scope.emplist = data;
$scope.$apply();
console.log($scope.emplist);
}
});
}
$ http.get上的文档:https://docs.angularjs.org/api/ng/service/$http#get
申请文件:https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply
答案 2 :(得分:0)
$ http是在这种情况下使用的正确工具,它具有角度双向数据绑定的意识,并且会在观察到的变量发生变化后自动消化范围。这是控制器的简化版本:
angular.module('MyApp.ctrl.crud', [])
.controller('loginController', ['$scope','$http', function($scope, $http) {
$scope.emplist = [];
$http.jsonp('/Home/getList').success(function(data){
$scope.emplist = data;
});
});