Question

我在Drupal 7中创建了一个自定义模块，其中views_datasource模块以Json格式提取数据，并在前端提取角度过滤数据（视图中的结果少于50）。我遇到的问题是当我尝试对结果进行分页时。该应用程序显示 ALL 结果，底部带有分页编号。当我输入过滤器文本输入时，结果被正确过滤并且分页反应正常（收缩和扩展）。我想要做的是让我的显示结果和分页一起工作，这样每页的最大结果数是2。我对此非常陌生，所以对任何一点帮助表示赞赏。提前谢谢您的时间！这是我到目前为止的代码。首先我有一个app.js

var cats = angular.module('cats', ['ui.bootstrap']);

jQuery(document).ready(function() { 
  angular.bootstrap(document.getElementById('cats-app'),['cats']);
});

然后我的catsController.js

cats.controller('catscontroller', function ($scope, $http, $filter, $timeout) {    
  $scope.currentPage = 1;
  $scope.itemsPerPage = 2;

$scope.allCats = [];
  $http.get('json/cats').success(function (result) {    
    $scope.allCats =   result.nodes;
  });      

$scope.filter = function() {
        $timeout(function() {             
            $scope.totalItems = $scope.filtered.length;

        }, 10);

    };

     $scope.pageChanged = function (currentPage) {
    var start = (currentPage - 1) * $scope.itemsPerPage;
    var end = start + $scope.itemsPerPage;
    $scope.allCats = $scope.allCats.slice(start, end);
    };

});

注意：最后一部分现在没有做任何事情，但我在没有过滤器的分页时正在工作最后，我的所有cats.tpl.php

<div id="cats-app" ng-controller="catscontroller" >
 <input type="text" ng-model="search.node.title" ng-change="filter()" placeholder="Search"/><br/>
    <br/>
    <ul>
        <li ng-repeat="cat in filtered = (allCats | filter:search) " >
        {{cat.node.title}}</li>
    </ul>

  <div class="pagination-centered">
      <pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage"
       ng-change="pageChanged(currentPage)"></pagination>    
 </div>    
</div>

编辑：
Nagasimha的代码看起来更清洁，但仍然没有做到这一点...... 我有6个虚拟标题：dog3，dog2，dog1，cat3，cat2，cat1。当我进入页面时，我将所有6个结果列在一个列表中，而寻呼机1-2-3。然后当我键入＆＃34; dog＆＃34;我得到dog3，dog2，dog1和寻呼机1-2。假设每页只有2个项目，所以寻呼机是正确的（第3轮/每页2个= 2）但我不知道如何在第1页上显示dog3，dog2然后狗1在第2页

 cats.controller('catscontroller', function ($scope, $http, $filter, $timeout) {

  $scope.currentPage = 1;
  $scope.itemsPerPage = 2;
  $scope.allCats = [];
  $scope.cats=[];
  $scope.filter = function() {
        $timeout(function() {             
            $scope.totalItems = $scope.filtered.length;

        }, 10);

    };

     $scope.pageChanged = function (currentPage) {
    var start = (currentPage - 1) * $scope.itemsPerPage;
    var end = start + $scope.itemsPerPage;
    $scope.cats = $scope.allCats.slice(start, end);
    };

    $http.get('json/cats').success(function (result) {    
    $scope.allCats =   result.nodes;
    $scope.filter();


    $scope.totalItems = $scope.allCats.length;
    $scope.cats = $scope.allCats.slice(0, $scope.itemsPerPage); 
    });      
});

然后在我的.tpl.php文件中

   ....
    <div class="cat" ng-repeat="cat in cats | filter:search" >
    ....

- 这会给出正确的分页和显示（第1页上的dog3，dog2，依此类推，1-2-3页），但现在当我使用＆＃34; dog＆＃34;在过滤器中我仍然有1-2-3页（inssed为1-2）和dog3，dog2在第1页;第2页上的dog1和第3页上的空白

如果我在tpl.php中使用相同的控制器

...
<li ng-repeat="cat in filtered = (cats | filter:search) " >
...

然后我只在第1页上找到了dog3，dog2（过滤器仅适用于这2个结果）

Answer 1

尝试重新排序函数并在获取json数据后调用过滤器。代码如下：

$ scope.allCats = []; $ scope.cats = [];

$(document).ready(function() {
  $("body ").css("background-image", "url('http://i.imgur.com/rs2Ittp.jpg')");
  $(window).scroll(function() {
    if($(this).scrollTop() > 0) {
     $("body ").css("background-image", "url('http://i.imgur.com/rs2Ittp.jpg')");
    }
    if($(this).scrollTop() > 1000) {
      $("body ").css("background-image", "url('http://i.imgur.com/H5QLuD6.jpg')");
    }
    if($(this).scrollTop() > 2000) {
      $("body ").css("background-image", "url('http://i.imgur.com/KzZpgdS.jpg')");
    }
    if($(this).scrollTop() > 3000) {
     $("body ").css("background-image", "url('http://i.imgur.com/UsLLJSx.jpg')");
    }
  });
});

请参阅更改。另外，在猫和＃34;

中使用上面的代码和＃34; ng-repeat cat

角js和Drupal过滤器和分页

1 个答案: