gpt4 book ai didi

javascript - Angular js 按钮点击

转载 作者:行者123 更新时间:2023-12-03 09:56:56 24 4
gpt4 key购买 nike

我创建了一个按钮,单击该按钮会发出 ajax 调用,并且通过 ajax 获得的服务器响应使用 Angular js 绑定(bind)到表。根据我的说法,问题是第一次单击按钮本身时,数据必须出现在网页上。但是第二次单击按钮时会发生这种情况。我能够正确排序和过滤数据,但问题是我需要单击按钮二在获取表格之前分别计时

<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>

最佳答案

你的问题是,你正在使用$.ajax。它不会运行摘要循环,因此绑定(bind)不会在 html/scope 上更新。您必须使用 $http 而不是 $.ajax,如果您使用 $http Angular 将在 ajax 完成时运行摘要循环。

代码

$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 jQuery ajax while angular provided you $http is problematic and considered as bad practice.

关于javascript - Angular js 按钮点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30702167/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com