Поисковая система AngularJS с фильтром и пагинацией - PullRequest
0 голосов
/ 28 сентября 2018

Нужен некоторый совет, чтобы сделать это, я долго пытался создать поисковый фильтр и наконец заработал как ожидалось, но я не знаю, как заставить длинный JSON загружаться быстрее.Я попытался из Backend (делит большой 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>

Я пыталсятакже принести длинный JSON по частям из http.get, но я не знаю, как это сделать.Drupal Backend не является для меня решением, потому что, если я сделаю нумерацию страниц из Backend, он не будет работать во Front-End.

Я надеюсь, что вы можете дать мне подсказку, что я могу сделать, чтобы решить эту проблему быстрееи с лучшей производительностью.Спасибо !!!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...