javascript - begin - limitto angularjs

Usar ng-repeat y limitTo para limitar la cantidad de elementos visibles que se muestran

Question

Estoy tratando de limitar mis conjuntos de resultados a un número fijo. Puedo usar limitTo con ng-repeat , pero esto limita los elementos independientemente de su visibilidad actual y elimina elementos del DOM. Quiero limitarme a una cantidad de elementos visibles mientras mantengo todo en el DOM.

Aquí está el código actual que tengo. Mi objetivo es mostrar siempre no más de 50 elementos en la lista aunque los items contengan 500 artículos.

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

Esto inicialmente limitará a 50 elementos, pero si filtro la lista (modificando item.visible en algunos elementos), la lista nunca muestra elementos en el rango de 50 - 500 y en su lugar muestra menos de 50 elementos. ¿Cuál es la forma correcta de limitar una ng-repeat para que solo cuente los elementos visibles hacia la restricción límite?

Answer 1

Hay un par de enfoques, tal vez el más reutilizable es que crees tu propio filtro personalizado "visible" que busca atributos visibles en tus artículos. Entonces podrías encadenarlos.

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

Aquí hay un enlace SO para crear filtros personalizados

Answer 2

Puede usar ng-if con $ index para especificar la visualización de DOM. Aún genera ng-si los comentarios, pero no carga el objeto, se notó tanto rendimiento mejorado.

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

Answer 3

Puedes usar:

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

filter:{visible: true} devolverá una lista de todos los elementos visibles

Puede echar un vistazo al documento angularjs para obtener más información sobre el filtro de filtro. http://docs.angularjs.org/api/ng.filter:filter

Answer 4

También es posible hacerlo de esta manera:

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