Angular js按鈕點擊

我已經創建了一個按鈕，點擊時會給出ajax調用，並且通過ajax獲得的服務器響應會使用角度js綁定到表。問題是根據我的第一次點擊按鈕本身的數據必須出現在網頁上。但這種情況發生在第二次點擊按鈕。我能夠正確排序和過濾數據，但問題是我需要點擊按鈕二時間分開之前它提取表Angular js按鈕點擊

<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

代碼

$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 AJAX是有問題的，被評定爲不好的做法。

來源

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

在異步的情況下調用類似$。阿賈克斯（），角度範圍是不內部事件更新更新。因此，您需要手動應用$應用更新，或者您可以繼續使用其他解決方案提供的任何其他解決方案。
他們也工作得很好。

<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按鈕點擊

回答

相關問題