Question

我创建了一个按钮，在单击时给出了ajax调用，通过ajax获得的服务器响应使用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>

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有问题，请使用角度$http ajax 并被认为是不好的做法。

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>

Angular js按钮单击

3 个答案: