AngularJS ngRepeat sin respetar limitTo filter

Estoy usando ng-repeat en un elemento de la lista para mostrar los artículos disponibles en el supermercado. Los elementos se recuperan usando $http como JSON y se almacenan en $scope.items, y ng-repeat funciona bien para mostrarlos todos. Mi problema es que hay 20 de estos elementos, y quiero limitar el número que se muestra a, digamos, 3. Estoy tratando de usar un filtro limitTo sin éxito. Aquí hay una captura de pantalla que muestra los elementos mostrados pero sin límite, a pesar de que se especifica el filtro:

http://i.imgur.com/4HiSdoG.png

Mi html es el siguiente:

<span class="item-choices-choice pull-left">
    <ul>
         <li ng-repeat="choice in items.0 | limitTo:3">
             <img src="{[{ choice.ImagePath }]}" class="img-rounded" /> {[{ choice.Name }]} <strong>{[{ choice.Price }]}</strong>
         </li>
    </ul>
</span>

Gracias por cualquier ayuda

EDIT:

Intentaré explicar algunas cosas más: reasigné {{ a {[{ en AngularJS, ya que de lo contrario entra en conflicto con Twig.

items se configura como una matriz en el controlador:

$scope.items = [];

Aquí está el JSON que recibo de la solicitud de AJAX:

http://pastebin.com/ZN6ipRKQ

Este JSON es interpretado por $http y asignado a $scope.items[0]. AngularJS parece estar funcionando bien en todos los casos, excepto en este.

preguntado el 03 de diciembre de 13 a las 11:12

necesitamos más información. mostrar la estructura de items.0 (por cierto, ¿por qué un nombre tan extraño para una propiedad?) -

@Stewie items.0 no está siendo evaluado por JavaScript. Angular está haciendo la evaluación, y funciona. No sería mi primera opción estructurar/escribir mi código, pero funciona: codepen.io/BrianGenisio/pen/uFqlm -

Hola, items es una matriz que contiene una matriz de 20 opciones en cada elemento. items.0 es el primer elemento que contiene las 20 opciones correspondientes, y items.1 tendrá otras diferentes, etc. -

2 Respuestas

He encontrado el problema.

Parece que si json_encode un ArrayIterator en PHP, lo codificará como un objeto dentro de un objeto en lugar de un objeto en una matriz. Esto parece causar el problema con los filtros limitTo (y otros) en Angular que no funcionan correctamente.

Después de convertir ArrayIterator en una matriz PHP normal y ejecutar json_encode, la limitación funciona absolutamente bien.

Respondido el 03 de diciembre de 13 a las 15:12

Su sintaxis de interpolación es incorrecta. Tienes corchetes entre tus llaves.

<img src="{[{ choice.ImagePath }]}" class="img-rounded" /> {[{ choice.Name }]} <strong>{[{ choice.Price }]}</strong>

necesita convertirse

<img src="{{ choice.ImagePath }}" class="img-rounded" /> {{ choice.Name }} <strong>{{ choice.Price }}</strong>

Después de arreglar eso, funciona para mí en este codepen.

Respondido el 03 de diciembre de 13 a las 12:12

Lo siento, debería haber explicado esto. Estoy usando Twig como mi motor de plantillas y he reasignado {{ a {[{ en Angular para evitar conflictos. Por lo demás, los elementos se muestran bien. - r.bilgil

No hay nada malo con su código que publicó a partir de Angular 1.2.1. ¿Qué versión de Angular estás usando? - Brian Genisio

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.