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