ng-repeat 및 limitTo를 사용하여 표시되는 항목 수 제한

ng-repeat 및 limitTo를 사용하여 표시되는 항목 수 제한

결과 세트를 고정된 수로 제한하려고 합니다.사용할 수 있습니다.limitTo와 함께ng-repeat그러나 현재 가시성에 관계없이 항목을 제한하고 DOM에서 항목을 제거합니다.모든 항목을 DOM에 보관하면서 표시되는 항목 수를 제한하고 싶습니다.

이것이 현재 가지고 있는 코드입니다.내 목표는 항상 목록에 50개 이상의 항목을 표시하지 않는 것이다.items에는 500개의 항목이 포함되어 있습니다.

<div ng-repeat="item in items | limitTo: 50">
  <div ng-show="item.visible">
    <p>item.id</p>
  </div>
</div>

이 경우 처음에는 50개 항목으로 제한되지만 (일부 항목에서 볼 수 있는 item.을 수정하여) 목록을 필터링하면 목록에는 50~500개의 항목이 표시되지 않고 50개 미만의 항목이 표시됩니다.데이터 전송 속도를 제한하려면ng-repeat제한 범위 내에서 보이는 항목만 계산하도록 할 수 있습니까?

다음을 사용할 수 있습니다.

<div ng-repeat="item in items | filter:{visible: true} | limitTo: 50">
    <p>{{item.id}}</p>
</div>

filter:{visible: true}표시되는 모든 항목의 목록을 반환합니다.

필터 필터에 대한 자세한 내용은 angularjs 문서를 참조하십시오.http://docs.angularjs.org/api/ng.filter:filter

다음과 같은 방법으로 작업을 수행할 수도 있습니다.

<div ng-repeat="item in items" ng-show="$index<50">
    <p>item.id</p>
</div>

몇 가지 방법이 있습니다. 가장 재사용 가능한 방법은 항목에서 보이는 속성을 찾는 '보이는' 사용자 정의 필터를 만드는 것입니다.그럼 묶을 수 있어

<div ng-repeat="item in items | visible | limitTo: 50">

커스텀 필터를 작성하기 위한 SO링크는 다음과 같습니다.

ng-if 를 $index 와 함께 사용하여 DOM 표시를 지정할 수 있습니다.ng-if 코멘트는 계속 생성되지만 오브젝트는 로드되지 않습니다.

<div ng-init="your.objects={{},{},{}}; your.max=10">
  <div ng-repeat="object in your.objects" ng-if="$index<your.max">
    {{object}}
  </div>
</div>

언급URL : https://stackoverflow.com/questions/19601028/using-ng-repeat-and-limitto-to-limit-the-number-of-visible-items-displayed