Angular js Button click

Я создал кнопку, которая на клик дает вызов ajax, и ответ сервера, полученный через ajax, привязан к таблице, используя угловые js. Проблема заключается в том, что при первом нажатии самой кнопки данные должны появляться на веб-странице. Но это происходит при втором нажатии кнопки. Я могу сортировать и фильтровать данные правильно, но проблема в том, что мне нужно нажать кнопку два раз отдельно до того, как он извлекает таблицуAngular js Button click

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

источник

2015-06-08 Krapi shah

У вас проблема в том, что вы используете $ .ajax. который не будет запускать цикл дайджеста, привязка не будет обновляться на html/scope. Вы должны использовать $http вместо $.ajax. Если вы используете $http, угловой запуск цикла дайджеста после завершения 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); 
})

Использование jQuery Аякса в то время как угловой условии, что вы $http проблематично и рассматривается как плохая практика. не

источник

2015-06-08 06:08:02

Определение вы контроллера, как это:

fooddata.controller("myCtrl", function ($scope, $http) {

А потом сделать это сделать запустить 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; 
        }); 
}

источник

2015-06-08 06:12:09

В случае асинхронных вызовов как $ .ajax(), угловой охват нет дольше обновляется внутри событий. Поэтому вам нужно сделать $ apply вручную, чтобы применить обновления, или вы можете перейти к любому из других решений, предоставляемых другими.
Они тоже хорошо работают.

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

источник

2015-06-08 06:22:21 jsNovice

Angular js Button click

ответ

Смежные вопросы