Question

我正在尝试使用Angularjs从服务中检索一些数据。最初，我想展示前10个元素。然后，当用户点击一个按钮（使用ng-click =“next（）”）时，我希望再次触发相同的功能，以获得接下来的10个元素。

这是我的控制器：

Admin.controller('orders', function ($scope, $http) {

var startIndex = 0;
const count = 10;

function retrieveData(startIndex, count) {
    $http({
            method: 'POST',
            url: '/Admin/order/GetOrders',
            data: { "startIndex": startIndex, "count": count }
            })
            .success(function (data) {
                $scope.orders = data;
                startIndex = startIndex + count;
                $scope.$apply();
            });
};

retrieveData(startIndex, count);

$scope.next = retrieveData(startIndex, count);

};

现在，发生的事情是函数retrieveData（）第一次完美运行，但是当我点击按钮时没有任何反应。我确信“click”事件会触发该函数，因为我试图用警报替换代码，但我不明白为什么函数retrieveData（）本身只能在第一次运行。

我错过了什么？

<div class="container admin" ng-controller="orders">
<table class="table">
    <tbody>
        <tr ng-repeat="order in orders| filter:{OrderStatus: 'Hto'} | filter:query | filter:'!'+showCancelled | orderBy:predicate:reverse">
            <td>
                {{order.UserName}}
            </td>
            <td>
                <span ng-class="{ 'label label-danger' : isLate }">
                    {{order.OrderDate}}
                </span>
            </td>
            <td>
                {{order.Country}}
            </td>
            <td>
                <span ng-class="{ 'label label-warning' : order.OrderStatus == 'HtoPreAuth' || order.OrderStatus == 'SalePreAuth'}">
                    {{order.OrderStatus}}
                </span>
            </td>
        </tr>
    </tbody>
</table>
<a href="" ng-click="retrieveData()">
    next
</a>
</div>

Answer 1

您应该在$ apply方法中进行更改：

Admin.controller('orders', function ($scope, $http) {

    var startIndex = 0;
    const count = 10;


    $scope.retrieveData() { // No parameters
        $http({
            method: 'POST',
            url: '/Admin/order/GetOrders',
            data: { "startIndex": startIndex, "count": count }
        })
        .success(function (data) {
            startIndex = startIndex + count;
            $scope.orders = data;

            if(!$scope.$$phase) {
                $scope.$digest();
            }
        });
    }

    $scope.retrieveData();
};


// And the view
<a ng-click="retrieveData()"></a>

编辑：

从$ scope.retrieveData函数中删除参数，因为它们将是未定义的如果用ng-click =“retrieveData（）”

调用该函数

Angularjs不会更新从$ http服务检索到的数据

1 个答案: