用户创建过滤器后调用 JSON

Question

我有一个非常大的 JSON（5000 个键，每个键有 5 个值），我想知道是否有更好的方法来提高这个键的性能。例如，我在 Drupal 7 中使用 AngularJS 和后端。

我的看法

  <ul class="list-group border-0">
                 <form class="form-inline m-3">
                    <div class="col-sm p-0 float-left w-50">
                      <label class="col-form-label text-primary lead form-group" for="inputsm" for="name" for="inlineFormInput">Year: </label>
                    </div>
                    <div class="col-sm p-0 float-left w-50">
                      <input class="form-control" ng-model="searchYear"/> 
                    </div>
                 </form> //I have more filters than this one...
                  <li class="list-group-item border-0" ng-repeat="item in filterData = (informes | filter:{year: searchYear}) | limitTo:10:10*(currentPage-1)">
                     <div class="wrapper">
                        <div class="informes">
                          <a href="#!/node-informes" ng-value="{{item.nid}}">
                            <p class="text-left">
                               <p ng-click="nodeID(item)">{{item.title}}</p>
                            </p>
                          </a>
                        </div>
                    </div>
                </li>      
              </ul>

和 JS

    informes.factory('InformesFtry', ['$http', function ($http) {
  return {
      getAll: function () {
        return $http.get('https://myjsonurl/json');
      }
   };
}]); 

 informes.controller('InformesCtrl', ['drupal', '$rootScope', '$scope', '$http', 'InformesFtry', '$localStorage', function(drupal, $rootScope, $scope, $http, InformesFtry, $localStorage) {

    InformesFtry.getAll().success(function(rows) {
        $scope.informes = (rows, function(items) {
            return rows.nodes;
        })();
        $scope.output();
    });

    $scope.loading = true;
    $scope.loaded = false;
    $scope.totalItems = [];
    $scope.currentPage = 1;
    $scope.itemsPerPage = 10;

    $scope.output = function() {
        $scope.loading = false;
        $scope.loaded = true;
        $scope.totalItems = $scope.informes.length;
        $scope.viewby = 10;
        $scope.maxSize = 5;
        $scope.itemsPerPage = $scope.viewby;
        $scope.displayItems = $scope.informes.slice(0, 10);
        var currentPage = $scope.currentPage;

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

        $scope.pageChanged = function() {
            var startPos = ($scope.currentPage - 1) * 10;
            $scope.displayItems = $scope.informes.slice(startPos, startPos + 10);
        };

    }

    $scope.nodeID = function(item) {
     $localStorage.nid = item.nid;
     console.log("nodeID");
    }
}]);

我尝试从我的后端分离这些文件并从控制器迭代，但是从视图进行查询后在 JSON 中搜索性能更好，就像我的逆我在做到处搜索，但我找不到可能的解决方案。

在从视图进行查询后，我考虑使用 json。

我不知道如何实现。除非有某种方法可以在调用 JSON 之前制作过滤器，否则分离文件将给我相同的结果。提前致谢。

Answer 1

是的，绝对有办法提高性能。您可以通过将过滤器逻辑从 ng-repeat 移动到控制器来提高性能。然后更新您要在控制器中重复的项目列表。这是一篇很好的文章，正是在谈论这个。

https://toddmotto.com/use-controller-filters-to-prevent-digest-performance-issues/

关于为什么这有帮助的简要解释是，您的 ng-repeat 将持续处理摘要周期的更改，即使它周围的值从未改变，这意味着它每次都会过滤那 5,000 条记录。您可以将过滤逻辑移动到控制器，然后在您更新列表时触发，方法是在过滤器上使用 ng-change（例如您的年份输入）。

所以实现它看起来像下面这样：

JavaScript:

$scope.updateData = function(){
    var filteredData = $filter('filter')($scope.informes, {'year': $scope.searchYear});
    filteredData = $filter('limitTo')(filteredData, 10, (10 * (currentPage - 1)));
    $scope.filteredData = filteredData;
}

HTML:

<!-- Your Inputs should have ng-change -->
<input class="form-control" ng-model="searchYear" ng-change="updateData()"/> 

<!-- Remove filters from html and loop over your filtered list -->
<li class="list-group-item border-0" ng-repeat="item in filteredData">

编辑：添加了额外的解释和示例代码更改。

用户创建过滤器后调用 JSON

Call JSON after user has made the filter

json

drupal

angularjs