javascript - AngularJS 代码挂起浏览器

Question

我正在调用一个 Web 服务，它返回大约 3000 条记录作为 HTML 响应的数据条目，并且我正在尝试使用 angularJS 读取此响应。

下面是我用来调用服务的 AngularJS 代码

angular.module('tabApp', ['ngSanitize'])
  .controller('TabController', ['$scope', 'HttpService', function($scope, HttpService) {
        $scope.tab = 0;

        $scope.setTab = function(newTab){
              $scope.tab = newTab;

            $scope.loading = true;
            HttpService.CallService('Service.php?id='+newTab,newTab, function (data) {
                             $scope.myText = data;
                             $('.count').show();
                             $("[id^=searchg]").show();
                             $('.results').show();
            });
        };


        $scope.isSet = function(tabNum){
          return $scope.tab === tabNum;

        };

        $scope.setTab1 = function(newTab1){
            $scope.tab = newTab1;
            $('.loaderImage').hide();
      };



        $scope.isSet1 = function(tabNum){
            return $scope.tab === tabNum;
          };
}])

.service('HttpService', ['$rootScope', '$http', function ($rootScope, $http) {
        $rootScope.loading = true;
        return {
            CallService: function (url,tabnum, callback) {                   
                $http({
                method: "POST",
                url: url,
                data: {id: tabnum}})
                    .success(function (data, status) {                            
                        $('.loaderImage').hide();
                        callback(data, status);
                    }).error(function (data, status) {
                    $('.loaderImage').hide();
                        callback(status);
                    });                 
            } 
        }
    }]);

我的问题是，如果返回的记录超过 1500 条，浏览器就会挂起。请告知我如何改进此问题。

更新:

我的 html 代码如下所示

<div ng-show="isSet(1)">
        <div id=matches  style="display:none"></div>
        <input type=text id=searchg placeholder="Type to search..." style="display:none" />
          <p class="preload" ng-bind-html="myText"></p>
            </div>

Answer 1

正如我们所看到的，您正在尝试绑定(bind)大量数据。 future ，它可能会变得更笨重。 您应该使用服务器端分页并仅获取记录数，即您的分页。

这里是引用的 JSFiddle 链接。

http://jsfiddle.net/dwahlin/3Kewg/

希望这有帮助!为编码干杯! :)