javascript - AngularJs 动态更新 $http 方法的 URL

Question

所以我试图在 Angular 中制作无限滚动。我想要在页面上显示的数据项由第三方 API 提供，URL 如下所示:

http://example.com/item/data/?param=item&pagesize=100&page=1

现在我正在使用 $http 向服务器进行成功的 ajax 调用，并且我创建了一个指令，该指令在滚动时将从 url 加载更多项目。但我无法更新 URL，一旦我开始滚动，我就希望我的 URL 变成这样:

http://example.com/item/data/?param=item&pagesize=100&page=1
http://example.com/item/data/?param=item&pagesize=100&page=2
http://example.com/item/data/?param=item&pagesize=100&page=3
http://example.com/item/data/?param=item&pagesize=100&page=4
....

但是每次我滚动 URL 就会变成: http://example.com/item/data/?param=item&pagesize=100&page=1
http://example.com/item/data/?param=item&pagesize=100&page=1
http://example.com/item/data/?param=item&pagesize=100&page=1
http://example.com/item/data/?param=item&pagesize=100&page=1

这意味着页面参数永远不会更新，或者即使它是 Shttp 也永远不会正确执行它。有人可以告诉我如何更新 $http 中的 URL 参数，该参数从第三方 API 中提取数据。

代码大致如下所示:

var page = 1;
        var url = 'http://example.com/item/data/?param=item&pagesize=100&page=' + page;
        $http.get(url)
            .success(function(data, status, config, headers) {
                $scope.page = 1;
                for (var i = 0; i < data.items.length; i++) {
                    $scope.totalTags = data.items;
                    $scope.page += 1;

                }

            $scope.loading = false; 
        })
            .error...//rest of the stuff 

Answer 1

您的代码存在几个问题:

• var page 和 $scope.page 是两个不同的变量；您使用前者来选择 $http 请求中的页面，但从不增加它。这就是为什么您总是看到第 1 页。
• 你的循环没有做你想要它做的事情:你替换你的数据一百次，而不是将新数据附加到现有的集合中，并且你增加 $scope.page 一百次而不是一次(但是你不要使用 $scope.page，这样它不会执行任何操作，尤其是每次检索数据时都将其设置回 1)。

试试这个代码片段:

$scope.page = 1;
var url = 'http://example.com/item/data/?param=item&pagesize=100&page=' + $scope.page;
$http.get(url)
    .success(function(data, status, config, headers) {
        for (var i = 0; i < data.items.length; i++) {
            $scope.totalTags.push(data.items[i]);
        }
        $scope.page += 1;
        $scope.loading = false; 
    })
    .error...//rest of the stuff