Angular js按钮点击

Question

我已经创建了一个按钮，它在单击时发出ajax调用，通过ajax获得的服务器响应使用angular js绑定到表。根据我的说法，第一次单击按钮时，数据必须出现在webpage.But上。第二次单击按钮时就会发生这种情况。我能够正确地对数据进行排序和筛选，但问题是，我需要分别单击按钮两次才能获取表

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

Answer 1

您的问题是，您正在使用$.ajax。这将不会运行摘要循环结果，绑定将不会在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);
})

使用jQuery ajax，而angular提供$http是有问题的，被认为是糟糕的做法。

Answer 2

这样定义你的控制器：

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;
                    });
}

Answer 3

在像$.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>