如何一次只显示 25 个元素? [英] how to show only 25 element at one time?

问题描述

我正在尝试使用 angular js 在 ionic 中制作表格视图.但是我有很多数据可以显示 5000 个对象.因此在获取数据后，我的 UI 挂起，因为它正在 dom 上打印数据.所以我想实现延迟加载，以便只有 100 个元素对我可见，或者只有 100 个元素存在于 dom 中.当用户滚动它时，它会下载另外 100 个对象或元素并删除上层元素，以便我的 UI 不会挂起.我们可以这样做吗?在角度js中我将向你展示我的 UI 是如何挂起的.看看我的例子

我的装载机挂了大约 5 秒钟..

所以我在演示中尝试了无限滚动，以便一次只能显示 100 个元素

这是我的无限滚动代码但是我一次无法显示 100 个元素我也没有收到任何错误

 <div class="row" ng-repeat="_list 中的列 | orderBy: sortval:reverse | filter: query"><div class="col col-center brd collapse-sm" ng-repeat="field in column.columns" ng-show="invoice_column_name['index'].fieldNameOrPath===field.fieldNameOrPath">{{field.value}}

<div class="col col-10 text-center brd collapse-sm"></div>

</ion-infinite-scroll></离子含量>

解决方案

更新的Plunker

我采取的方法与其他方法略有不同.

控制器顶部有一个名为 showitems 的变量.这可以控制您一次要显示的项目数量.计数器变量将跟踪显示多少项目的位置.最初，该值设置为 showitems 值，因为我们将立即在 ShowViewAfterSuccess 函数中使用第一项预填充数据集.

var showitems = 100;var counter = showitems;

在您的 ShowViewAfterSuccess 函数中，我将数据添加到名为 $scope.total_invoice_records 的范围变量中.

接下来，我对数据运行第一个数组切片.这将根据 showitems 变量中设置的值将前 x 条记录传递给 $scope.invoice_records.这将使用第一组记录初始化视图.

$scope.total_invoice_records=data.records;$scope.invoice_records = $scope.total_invoice_records.slice(0, showitems);

我添加了一个 loadMore 函数，它只是从总记录集中获取下 x 个记录，并将它们连接到 $scope.invoice_records 中的当前集并增加计数器.loadMore 还将检查是否还有更多记录要加载，并将消息广播到 ionic 无限滚动指令以移除微调器.

 $scope.noMoreItemsAvailable = false;$scope.loadMore = function() {var next = $scope.total_invoice_records.slice(counter, counter+showitems);$scope.invoice_records = $scope.invoice_records.concat(next);计数器 = 计数器 + 展示项目；如果(计数器> = $scope.total_invoice_records.length){$scope.noMoreItemsAvailable = true;}$scope.$broadcast('scroll.infiniteScrollComplete');};

最重要的是，记得将无限滚动元素上的immediate-check属性设置为false:

I am trying make table view in ionic using angular js .but I have lot of data to show around 5000 object .So after getting data my UI hang because it is printing the data on dom.So I want to implement lazy loading so that only 100 element is visible to me or only 100 element present in dom only .When user scroll it download another 100 objects or element and removing the uppers element so that my UI not hang .can we do in angular js I will show you how my UI hang .take a look my example here

my loader hang for around 5 seconds ..

So I tried with infinite scroll in my demo so that I am able to show only 100 element at one time

here is my code of infinite scroll But I am not able to display 100 element at one time I didnot get any error also

  <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="canWeLoadMoreContent()" distance="10%">
      <div class="row" ng-repeat="column in _list | orderBy: sortval:reverse | filter: query">
        <div class="col col-center brd collapse-sm" ng-repeat="field in column.columns" ng-show="invoice_column_name['index'].fieldNameOrPath===field.fieldNameOrPath">{{field.value}}</div>
        <div class="col col-10 text-center brd collapse-sm"></div>
      </div>
      </ion-infinite-scroll>
    </ion-content>

解决方案

Updated Plunker

I took a little different approach then the others.

There is a variable at the top of the controller called showitems. This controls how many items you want to show at a time. The counter variable will keep track of where how many items are shown. Initially, the value is set to the showitems value since we're going to prepopulate the dataset with the first items immediately in the ShowViewAfterSuccess function.

var showitems = 100;
var counter = showitems;

In your ShowViewAfterSuccess function, I added the data to a scope variable called $scope.total_invoice_records.

Next, I run the first array slice on the data. This will pass the first x number of records to the $scope.invoice_records based on the value set in the showitems variable. This initializes the view with the first set of records.

$scope.total_invoice_records=data.records;
$scope.invoice_records = $scope.total_invoice_records.slice(0, showitems);

I added a loadMore function that simply grabs the next x number of records from the total record set and concatenates them to the current set in $scope.invoice_records and increments the counter. loadMore will also check if there are still more records to load and broadcasts the message to the ionic infinite scroll directive to remove the spinner.

  $scope.noMoreItemsAvailable = false;
  $scope.loadMore = function() {
    var next = $scope.total_invoice_records.slice(counter, counter+showitems);
    $scope.invoice_records = $scope.invoice_records.concat(next);
    counter = counter+showitems;
    if (counter>=$scope.total_invoice_records.length) {
      $scope.noMoreItemsAvailable = true;
    }
    $scope.$broadcast('scroll.infiniteScrollComplete');
  };

Most importantly, remember to set the immediate-check attribute on the infinite scroll element to false:

<ion-infinite-scroll immediate-check="false" ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>

这篇关于如何一次只显示 25 个元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！