Angular JS – ng-repeat y condiciones del bucle

Hola tengo este trozo de código:

<div ng-repeat="i in values">
{{i}}
</div>

Funciona, pero me gustaría poner condiciones adicionales dentro del bucle algo como:

<div ng-repeat="i in values">
{{i}}
if(i !== 0){
<div></div>
}
</div>

¿Cómo puedo lograr esto?

InformationsquelleAutor itsme | 2014-01-25

2 Kommentare

  1. 52

    Uso ng-if (o ng-show):

    <div ng-repeat="i in values">
       <div ng-if="i !== 0"></div>
    </div>

    Conectado al elemento, esto va a decidir si mostrar o no.

    Documentación para ng-si se puede encontrar aquí.

    Sin embargo, si sólo quieres hacer algo si usted es un bucle en el primer o último elemento, puede utilizar $first y $last propiedades de ng-repeat así. Estos son documentado con ng-repeat. Y puede ser utilizado como esta:

    <div ng-repeat="i in values">
       <div ng-if="$first"></div>
    </div>
    • ng-si es una mejor solución que la ng-show porque ng-si se modifica el DOM. ng-show solo se muestra/oculta el elemento.
    • sí, es por eso que en el ejemplo se utiliza ng-si. Pero, ambas son soluciones válidas basadas en lo que usted está tratando de lograr.
    • hey gracias, ¿sabes hombre ¿cómo puedo poner un var incremental en el mismo bucle ? 😛 me gustaría mostrar un div dentro de bucle sólo si el incremento%3 === 0, por ejemplo, pero no puedo averiguar cómo 🙁
    • Hay una construida en la ng-repeat: $index. También tienes $odd y $even a hacer cosas como las filas alternas.
    • ohhhh guay por lo que sólo tiene ng-if=»$indice%3 === 0″ a la derecha?
    • sí, que debe hacerlo.
    • stackoverflow.com/questions/21869283/…
    • Creo que es mejor usar un filtro, porque tengo la esperanza (no ver) que $índice tendrá un índice del elemento (como el filtrado índice de la matriz). Si utilizamos ng-si (que en realidad, la solución más sencilla y que puede vinieron a la mente), vamos a tener problemas con $índice, porque no sería elementos ocultos que sería considerado por $índice así. stackoverflow.com/questions/18056241/…

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein