AngularJS 使用大型数据库进行搜索

Question

我有这种问题，我的数据库有 600k 个结果，我有一个由我创建的 Web 服务 REST，所以我有我的请求查询的文件 json。 现在我的 json 文件在我的 Angular 应用程序移动设备中，但是由于我的编码它冻结了很多，因为我获取了所有整个文件 json 并做一个列表框，在显示整个列表框之后我可以搜索，当我输入任何它冻结的东西时，我的搜索实时工作，我不在乎我是否失去了这个功能，我想搜索而不冻结，但我不知道如何解决这个问题。

我有我的数据库 mysql，我的请求的示例结果是这个（JSON）：

[
  {
    "date": "2009-02-14",
    "pool": 2,
    "timing": "H",
    "federation": "A2",
    "id_race": 73633,
    "id_com": 91
  },
  {
    "date": "2009-02-14",
    "pool": 2,
    "timing": "J",
    "federation": "A2",
    "id_race": 7348,
    "id_com": 91
  },
  {
    "date": "2009-02-14",
    "pool": 2,
    "timing": "J",
    "federation": "A2",
    "id_race": 2397,
    "id_com": 223
  },
  ...
]

我的 AngularJS 控制器 html 是这样的：

    <div ui-content-for="title">
    <span class="small">Search:<input ng-model="query"></span>
</div>
<div class="scrollable">
    <div class="scrollable-content">
        <div class="list-group">
            <div class="list-group-item" ng-repeat="race in raceList | filter:query">
                <br />
                <span>{{race.date}} - {{race.federation}} - {{race.pool}} - {{race.timing}}</span>
            </div>
        </div>
    </div>
</div>

而我的控制器js是这样的：

'use strict';

var raceControllerModule = angular.module('raceControllerModule', ['appServiceModule']);

raceControllerModule.controller('raceController',
    ['$scope', '$routeParams', 'appService', function($scope, $routeParams, appService) {

        $scope.raceList = [];

        appService.newRacePromise().then(function (response) {
            $scope.raceList = response.data;
        });

    }]);

当我搜索时，我不想冻结，所以像我在输入之前使用按钮获取我的结果，搜索可以从日期或池或联合完成。

编辑：appService.js

'use strict';

var appServiceModule = angular.module(‘appServiceModule', []);

appServiceModule.factory(‘appService', ['$http', function ($http) {

    var BASE_URL_ = "../api/";

    var service = {};

    service.newRacePromise = function () {
        return $http.get(BASE_URL_ + 'races’);
    };

    return service;
}]);

Answer 1

使用页面限制进行 Ajax 搜索。您不必在单个页面中显示所有 60 万条记录。