如何在同一时间只显示25元？ [英] how to show only 25 element at one time?

问题描述

我试图采用了棱角分明的JS。但我有很多的数据显示周围使离子表视图的 5000对象。所以获取数据我的UI挂起，因为它是在打印DOM数据后。所以我想实现延迟加载，这样只有100元是可见的我还是在DOM只有100元present只。当用户滚动它下载其它100个对象或元素和去除鞋面的元素，使我的UI不会挂。我们可以做的JS角
我会告诉你我的UI如何挂。采取看看我这里的例子

我的装载机挂起大约5秒钟。

所以我有无限滚动试过我的演示，使我能够只显示元素在同一时间

100

下面是无限滚动的我的code，但我不能在同一时间我因此未得到任何错误也显示100元

 ＆LT;！noMoreItemsAvailable离子无限滚动NG-IF =上无限=canWeLoadMoreContent（）距离=10％＆GT;
      ＆LT; D​​IV CLASS =行NG-重复=在_list栏|排序依据：sortval：反转|过滤器：查询＆GT;
        ＆LT; D​​IV CLASS =COL COL-中心BRD崩溃-SMNG重复=字段column.columns ng-show=\"invoice_column_name['index'].fieldNameOrPath===field.fieldNameOrPath\">{{field.value}}</div>
        ＆LT; D​​IV CLASS =COL COL-10文本的中心BRD崩溃-SM＆GT;＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;
      ＆LT; /离子无限滚动＆GT;
    ＆LT; /离子含量＆GT;
 

解决方案

更新Plunker

我花了一点不同的方法，然后其他人。

有是在控制器称为showitems的顶部的变量。它控制你想要多少个项目在时间显示。计数器变量会跟踪，其中显示有多少项目。最初，因为我们要$ P $立即与第一批项目在ShowViewAfterSuccess功能ppopulate数据集中的值设置为showitems值。

  VAR showitems = 100;
VAR计数器= showitems;
 

在您ShowViewAfterSuccess功能，我添加的数据到一个范围的变量叫做$ scope.total_invoice_records。

接着，我跑的数据的第一阵列片。这将通过记录到$ scope.invoice_records基于在showitems变量设定值的第x个。这初始化与第一组记录的视图。

  $ scope.total_invoice_records = data.records;
$ scope.invoice_records = $ scope.total_invoice_records.slice（0，showitems）;
 

我补充说，只是抓起，从总的记录集记录下一个x号，并将它们连接到$ scope.invoice_records当前设置，并增加柜台loadMore功能。 loadMore还将检查是否还有更多的记录加载和广播消息离子无限滚动指令来删除微调。

  $ scope.noMoreItemsAvailable = FALSE;
  $ scope.loadMore =功能（）{
    接下来VAR = $ scope.total_invoice_records.slice（计数器，计数器+ showitems）;
    $ scope.invoice_records = $ scope.invoice_records.concat（下）;
    计数器=计数器+ showitems;
    如果（计数器＆GT; = $ scope.total_invoice_records.length）{
      $ scope.noMoreItemsAvailable =真;
    }
    。$ $范围广播（'scroll.infiniteScrollComplete'）;
  };
 

更重要的是，记得把无限滚动元件上的即时检查属性设置为假

 ＆下;！noMoreItemsAvailable离子无限滚动立即检查=假NG-如果=上无限=loadMore（）的距离=10％＆GT ;＆LT; /离子无限滚动＆GT;
 

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屋！