Question

需要一些提示来做到这一点，我已经很长时间尝试创建搜索过滤器，并且最终按预期工作，但是我不知道如何使长JSON更快地加载。我从后端尝试了一下（将大型JSON与JSON？page = 1，page = 2等分开），它可以工作，但搜索不会在其他页面中进行过滤，因此我尝试了for循环迭代来在加载时加载页面但没有用（与以前一样的问题）。唯一的方法是这样做：

控制器：

'use strict';

var informes = angular.module('informes', ['angular-drupal', 'ui.bootstrap']);

informes.controller('InformesCtrl', function(drupal, $scope, $http) {
    $scope.totalItems = [];
    $scope.currentPage = 1;
    $scope.itemsPerPage = 10;

    var path = 'https://myurl.com/info'; 
    $http.get(path).success(function (rows) {
        $scope.informes = (rows, function(items) {
          return rows.nodes;
        })();

      $scope.viewby = 10;
      $scope.totalItems = $scope.informes.length;
      $scope.currentPage = 1;
      $scope.itemsPerPage = $scope.viewby;
      $scope.maxSize = 5;


      $scope.setItemsPerPage = function(num) {
        $scope.itemsPerPage = num;
        $scope.currentPage = 1;
      }

       var currentPage = $scope.currentPage;

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

    }); 

});

查看：

<div ng-app="informes" ng-controller="InformesCtrl"> 
        <div class="container">
            <ul class="list-group">
                <form class="form-inline">
                    <div class="col-sm p-0">
                      <label class="col-form-label text-primary lead form-group row" for="inputsm" for="name" for="inlineFormInput">Título: </label>
                    </div>
                    <div class="col-sm p-0">
                      <input class="form-control" ng-model="searchTitle"/> 
                    </div>
                </form>
                <form class="form-inline">
                    <div class="col-sm p-0">
                      <label class="col-form-label text-primary lead form-group row" for="inputsm" for="name" for="inlineFormInput">Resolución: </label>
                    </div>
                    <div class="col-sm p-0">
                      <input class="form-control" ng-model="searchReso"/> 
                    </div>
                 </form>
                 <form class="form-inline">
                    <div class="col-sm p-0">
                      <label class="col-form-label text-primary lead form-group row" for="inputsm" for="name" for="inlineFormInput">Año: </label>
                    </div>
                    <div class="col-sm p-0">
                      <input class="form-control" ng-model="searchYear"/> 
                    </div>
                 </form>
                  <li class="list-group-item" ng-repeat="item in informes | filter:{title:searchTitle, resolucion:searchReso, year: searchYear}  | limitTo:itemsPerPage">
                     <div class="wrapper">
                        <div class="informes">
                          <a href="{{item.path}}">
                            <p class="text-center text-truncate">
                               <small>{{item.title}}</small>
                            </p>
                          </a>
                        </div>
                    </div>
                </li>      
              </ul>
            </div>                   
          <div class="col-lg-6 col-lg-offset-3 text-center">
            <ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" max-size="maxSize" boundary-links="true" previous-text="<" next-text=">" first-text="<<" last-text=">>"></ul>
          </div>

我也尝试从http.get中获取长JSON内容，但我不知道该怎么做。 Drupal后端对我来说不是一个解决方案，因为如果我从Backend进行分页，它将无法在前端使用。

希望您能给我一些提示，我可以做些什么来更快地解决此问题并获得更好的性能。谢谢！！！

带有过滤器和分页的AngularJS搜索引擎

0 个答案: