Question

我有一个显示会员详细信息的HTML模板。我也实现了相同的分页，以便我们可以减少初始加载时间。截至目前，我一次从服务器检索15个成员并显示它，其他成员可以使用分页查看。

每次点击分页按钮大约需要0.7秒才能加载15个成员。问题是，如果我点击分页3，加载细节需要0.7秒。再次，如果我点击分页1，它需要0.7秒的加载时间，它不应该。是否有任何方法可以将检索到的详细信息存储在某些位置，这样一旦加载了详细信息，再次点击它们就不会花费时间。

<div class="page" data-ng-controller="memberController">
  <table class="table table-bordered table-striped cf">
    <thead>
      <tr>
        <th>Business Name</th>
        <th>Contact Name</th>
        <th>Trade Balance</th>
        <th>Cash Balance</th>
      </tr>
   </thead>
    <tbody>
      <tr data-ng-repeat="member in details">
        <td>{{member.businessname}}</td>
        <td>{{member.person}}</td>
        <td>{{member.balance_trade}}</td>
        <td>{{member.balance_cash}}</td>
        <td>{{member.telephone}}</td>
      </tr>
    </tbody>
  </table>
  <div class="pagi">
    <div ng-repeat="pag in pagination" ng-class="{activePage : pag == curentpage }">
      <div class="navi" ng-click="Pagination($event)" data-page="{{ pag }}">{{ pag }}</div>
    </div>
  </div>
</div>

控制器

function memberController($scope, $http, $cookieStore) {
 var member_list = "https://phoe.merchant.com/api/app/mobifunctions/directory/member_list_wottrans.html?exchangeid=" + exId + "&contactid=" + conId + "&token=" + token;
 $http.get(member_list).success(function(response) {
     $scope.details = response;
     if (!$scope.$$phase) {
         $scope.$apply
     }
 });


 $scope.Pagination = function($event) {
     $('.loading').show();
     var target = $event.target;
     var dataValue = $event.target.innerHTML;
     var member_list = "https://phoe.merchant.com/api/app//member_list_wottrans.html?exchangeid=" + exId + "&contactid=" + conId + "&token=" + token + "&page=" + dataValue;
 $http.get(member_list).success(function(response) {
         $('.loading_mem').hide();
         $scope.details = response;
         if (!$scope.$$phase) {
             $scope.$apply
         }
     });
   }
 }

请帮助我。提前致谢

Answer 1

这就是我实现代码的方式。

function memberController($scope, $http, $cookieStore) {
 var member_list = "https://phoe.merchant.com/api/app/mobifunctions/directory/member_list_wottrans.html?exchangeid=" + exId + "&contactid=" + conId + "&token=" + token + "&page="; // note: no page data
 var cacheMembers = function(minPage, maxPage) {
    for(var i = minPage; i<=maxPage, i++) {
        $http.get(member_list + i, { cache: true }); // no need to attach success just for caching
    }
 };

 //cache first 3 page assuming starts from 0
 cacheMembers(0, 2);

 $scope.Pagination = function(pageNumber) {
     $('.loading').show();
     var target = $event.target;
     //var dataValue = $event.target.innerHTML;
     // using HTML is not a good practice actually it is against whole MVC logic
    $http.get(member_list + pageNumber, {cache:true}).success(function(response) {
         $('.loading_mem').hide();
         $scope.details = response;
         if (!$scope.$$phase) {
             $scope.$apply
         }
         //cache others as some of them already cached it s not going to be a major problem
         cacheMembers(pageNumber - 2, pageNumber + 2);
     });
   }

   $scope.Pagination(0); //load first one of course you can also try to read this from URL check $location
 }

在您的视图中，您在渲染页面链接时使用上面的代码位;

<a ng-click="Pagination($index)" ng-repeat=".........">....

希望这会有所帮助。

Answer 2

如果服务器上的数据变化不大，您可以只缓存结果：

$http.get(member_list, { cache: true }).success(function(response) {

此$http缓存将根据网址确定，因为您要更改page（查询字符串参数），应缓存每个网页的结果。然后，当您要求预先存在的页面时，您将获得缓存的值。

减少Angular JS中的分页加载时间

2 个答案: