Question

所以我正在学习AngularJS，我正在尝试替换从web服务获取数据的不那么漂亮的方法，并实时将其分配给使用ng-repeat绑定的变量。我想要实现的主要是异步调用。我现在无法使用它，因为AJAX在数据返回到范围变量后返回数据。

我目前的代码如下：

var app = angular.module("Listt", []);

    app.controller(
        "ListtController",
    function ($scope) {
        $scope.results = {
            response: [{
                name: '',
                surname: '',
                age: ''
            }]
        };
        $scope.searchListt = function () {
            loadingAnimationStart();
            $scope.results = getListt();
            loadingAnimationStop();
        };

        function getListt() {
            var returnData;
            $.ajax({
                url: 'listt',
                type: "POST",
                async: false,
                data: {
                    age_from: $('[name="age-start"]').val(),
                    age_to: $('[name="age-end"]').val()
                },
                success: function (data) {                
                    returnData = JSON.parse(data);
                }
            });
            return returnData;
        }
    }
);

在HTML中，我使用ng-click

指示搜索功能

<button ng-click="searchListt()">Search</button>

Answer 1

我在这里更新了你的代码。来自getListt();函数的searchListt函数调用。一旦ajax调用成功，则响应数据将分配给$scope.results

var app = angular.module("Listt", []);

    app.controller(
        "ListtController",
    function ($scope) {
        $scope.results = {
            response: [{
                name: '',
                surname: '',
                age: ''
            }]
        };
        $scope.searchListt = function () {
            loadingAnimationStart();
            getListt();

        };

        function getListt() {
            $.ajax({
                url: 'listt',
                type: "POST",
                async: false,
                data: {
                    age_from: $('[name="age-start"]').val(),
                    age_to: $('[name="age-end"]').val()
                },
                success: function (data) {                
                    $scope.results = JSON.parse(data);
                    loadingAnimationStop();
                }
            });
        }
    }
);

Answer 2

如果您使用'controllers' => [ 'invokables' => [ // This would not work any more as we created a factory of it // 'Application\Controller\Index' => 'Application\Controller\IndexController', ], // We should do it thus 'factories' => [ 'Application\Controller\Index' => 'Application\Controller\IndexControllerFactory', ], ],，则应使用angularJs

$http.post

Answer 3

为什么你可以直接调用searchlist函数并获取变量。我认为它会奏效。

$scope.results=[];

$scope.searchListt = function () {

           loadingAnimationStart();
           $.ajax({
                url: 'listt',
                type: "POST",
                async: false,
                data: {
                    age_from: $('[name="age-start"]').val(),
                    age_to: $('[name="age-end"]').val()
                },
                success: function (data) {                
                     $scope.results = JSON.parse(data);
                     loadingAnimationStop();
                }


            });
           loadingAnimationStop();
        }

异步发布请求并分配返回的数据

3 个答案: