Question

我正在研究ng-repeat增加限制按钮。我的问题是它在我的Feed中添加一行时有效，但似乎恢复到原来的limitTo然后停止工作。

app.js文件

angular.module('app').controller('MyController', function($scope, $http) {

$http.get('externaljsonfeed').success(function(data) {
    // $scope.limit = 6;
    // $scope.increasePosts = function() {
    //  $scope.limit += 3 ;
    // }
    $scope.posts = data;

    var limitStep = 5;
    $scope.limit = limitStep;
    $scope.incrementLimit = function(add) {
        $scope.limit += limitStep;
    };
    $scope.decrementLimit = function(remove) {
        $scope.limit -= limitStep;
    };

});

}）;

输出提要的html

<html lang="en" ng-app="app">  
<body ng-controller="MyController">     
    <div class="row" flex-row>
        <div class="small-up-1 medium-up-2 large-up-3">
            <div class="column" ng-repeat="posts in posts | filter:search | limitTo: limit">
                <div class="card">
                    <div class="image">
                        <a href="{{ posts.url }}" target="_blank"><img
                    src="{{ posts.image_thumbnail }}" alt="{{ posts.title }}" /></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

然后按钮增加limitTo

<button class="load-more-btn" ng-click="incrementLimit(add)">Discover More</button>

编辑：

它现在正常工作。

Answer 1

现在我面前没有一个工作示例，但是一旦函数退出，你在成功处理程序中定义的所有变量都不会再存在。

特别是这个可能会导致问题：

var limitStep = 5;

在这些方面尝试更多内容，将函数定义分开，它们不需要在成功处理程序中：

angular.module('app').controller('MyController', function($scope, $http) {

  $scope.limitStep = 5;
  $scope.limit = $scope.limitStep;
  $scope.incrementLimit = function() {
        $scope.limit += $scope.limitStep;
  };
  $scope.decrementLimit = function() {
        $scope.limit -= $scope.limitStep;
  };

  $http.get('externaljsonfeed').success(function(data) {
    $scope.posts = data;
  });
}

还要考虑incrementLimit和decrementLimit函数中的“add”和“remove”参数是什么以及它们的定义位置（如果有的话）。（我已将它们从我的代码中删除，因为我认为你根本不需要它们。）

ng-click增加限制仅适用一次，然后在向ng-repeat

1 个答案: