角js按钮单击
[英]Angular js Button click
问题描述
I have created a button which on click gives an ajax call and the server response obtained through ajax is binded to table using angular js. 
我创建了一个按钮，单击该按钮会发出ajax调用，并且使用angular js将通过ajax获得的服务器响应绑定到表。 The issue is according to me on first click of the button itself the data must appear on the webpage.But this happens on second click of the button.I am able to sort and filter data properly but the problem is i need to click button two times separately before it fetches the table 我认为问题是第一次单击按钮本身时数据必须出现在网页上。但是这发生在第二次单击按钮时。我能够正确排序和过滤数据，但问题是我需要单击两个按钮分别获取表之前的时间
<script>
var fooddata = angular.module("fooddata", []);
fooddata.controller("myCtrl", function ($scope) {
$scope.binddata = function () {
$.ajax({
type: "POST",
url: "ASSIGN.aspx/OnDataFetch",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
response.d = $.parseJSON(response.d);
$scope.foods = response;
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
}
);
</script>
<body>
<div id="id001"></div>
<div ng-app="fooddata" ng-controller="myCtrl">
// enter code here
<button ng-click="binddata()">Data Fetch</button>
<div>Sort by:
<select ng-model="sortExpression">
<option value="food_id">Food id</option>
<option value="type">Type</option>
<option value="priority">Priority</option>
</select>
</div>
Filter By Any:
<div><input type="text" ng-model="search" /></div>
<table border="1" cellpadding="10">
<tr><td>Food id</td><td>Type</td><td>priority</td></tr>
<tr ng-repeat="items in foods.d | orderBy:sortExpression | filter:search">
<!-- <td ng-repeat="cell in items">{{cell}}</td> -->
<td>{{items.food_id}}</td>
<td>{{items.type}}</td>
<td>{{items.priority}}</td>
</tr>
</table>
</div>
</body>
3 个解决方案
解决方案1
1 2015-06-08 06:08:02
You problem is, you are using $.ajax. 您的问题是，您正在使用$ .ajax。 which won't running digest cycle resultant the binding will not update on html / scope . 这将不会运行摘要循环，因此绑定不会在html / scope上更新。 You must use $http instead of $.ajax , If you use $http angular will run digest cycle when the ajax completed. 您必须使用$http代替$.ajax ，如果使用$http则当ajax完成时，angular将运行摘要循环。
Code 码
$http({ //<-- make sure you have added $http dependency on controller
method: "POST",
url: "ASSIGN.aspx/OnDataFetch",
headers: {
'Content-Type': "application/json; charset=utf-8"
}
}).
success(function(response) {
response.d = $.parseJSON(response.d);
$scope.foods = response;
}).
error(function(response) {
alert(response.d);
})
Use
jQueryajax while angular provided you$httpis problematic and considered as bad practice.$http提供角度，则使用jQueryajax是有问题的，并被视为不良做法。
解决方案2
0 2015-06-08 06:12:09
Define you controller like this: 像这样定义您的控制器：
fooddata.controller("myCtrl", function ($scope, $http) {
And then do this do run ajax 然后这样做运行ajax
$scope.binddata = function(){
var request = $http({
method: "post",
url: "yourAjaxFile.php",
data: {
//data
},
//contentType,
headers: {
'Content-Type': "application/json; charset=utf-8"
}
});
/* Check whether the HTTP Request is successful or not. */
request.success(function (data) {
$scope.foods = data;
});
}
解决方案3
0 2015-06-08 06:22:21
In case of Async calls like $.ajax(), the angular scope is no longer updated on inside events. 在$ .ajax（）这样的异步调用的情况下，不再在内部事件上更新角度范围。 So you need to do $apply manually to apply the updates or you can go forward with any of the other solutions provided by others. 因此，您需要手动执行$ apply来应用更新，或者可以继续使用他人提供的任何其他解决方案。
They too work well. 他们也很好。
<html><head><script>
var fooddata = angular.module("fooddata", []);
fooddata.controller("myCtrl", function ($scope) {
$scope.binddata = function () {
$.ajax({
type: "POST",
url: "ASSIGN.aspx/OnDataFetch",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
response.d = $.parseJSON(response.d);
$scope.foods = response;
if(!$scope.$$phase)
$scope.$apply();
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
}
);
</script>
<body>
<div id="id001"></div>
<div ng-app="fooddata" ng-controller="myCtrl">
enter code here
<button ng-click="binddata()">Data Fetch</button>
<div>Sort by:
<select ng-model="sortExpression">
<option value="food_id">Food id</option>
<option value="type">Type</option>
<option value="priority">Priority</option>
</select>
</div> Filter By Any:
<div><input type="text" ng-model="search" /></div>
<table border="1" cellpadding="10">
<tr><td>Food id</td><td>Type</td><td>priority</td></tr>
<tr ng-repeat="items in foods.d | orderBy:sortExpression | filter:search">
<!-- <td ng-repeat="cell in items">{{cell}}</td> -->
<td>{{items.food_id}}</td>
<td>{{items.type}}</td>
<td>{{items.priority}}</td>
</tr>
</table>
</div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.