3

私は今日、AngularJSと私のrailsバックエンドを使用して無限スクロールを実装しようとしています。私はjsfiddleを使用しました（みんなのように）http://jsfiddle.net/vojtajina/U7Bz9/

APIを呼び出していると、リクエストが行われ、サーバーが適切なコンテンツを返します。ここでは問題ありません。つまり、最初のバッチまたは結果のみが表示されます。他のすべてのリスト項目は空白です（ただし、レコードが存在するため、引き続き作成されます...）

アップデート：

リストアイテムの代わりにdivを表示するようにHTMLを変更すると、一番下までスクロールするたびに1つの新しいdivが表示されることに気付きました。リクエストごとに10レコードをロードしていることを考えると、これは非常に奇妙です...

コードは次のとおりです。 

<body ng-app="scroll" ng-controller="Main">
  <div id="fixed" when-scrolled="loadMore()">
    <ul class="unstyled">
      <li ng-repeat="user in users">{{user.first_name}}</li>
    </ul>
  </div>
</body>

function Main($scope, $http) {
  $http.get('/users.json').success(function(data){
    $scope.users = data;
  });

  var counter = 0;
  $scope.loadMore = function() {
    $http.get('/users/page/'+counter+'.json').success(function(data){
        $scope.users.push(data);
    });
    counter += 1;
    console.log($scope.users);
  };
  $scope.loadMore();
}

angular.module('scroll', []).directive('whenScrolled', function() {
  return function(scope, elm, attr) {
    var raw = elm[0];

    elm.bind('scroll', function() {
        if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
            scope.$apply(attr.whenScrolled);
        }
    });
  };
});

私は決してJSウィズではないので、何かを逃した可能性があります。

4

1 に答える 1

6

$scope.users.push(data);に変更する必要があります$scope.users = $scope.users.concat(data);。

ここで配列を呼び出すと$scope.users.push(data);、アイテムとしてユーザーに追加されるため、ページ 2 がロードされると、users最初の 10 アイテム + 11 番目のアイテムとして配列が含まれます。usersそれはあなたが望むものではありません.配列と配列を連結したいのですdata.

function Main($scope, $http) {
    $scope.users = [];

    var page = 1;
    $scope.loadMore = function() {
        $http.get('/users/page/' + page + '.json').success(function(data) {
                    $scope.users = $scope.users.concat(data);
                });
        page += 1;
        console.log($scope.users);
    };
    $scope.loadMore();
}

デモ:あなたのケース、ソリューション

于 2013-03-13T06:59:57.070 に答える