declaración if else en plantillas AngularJS
Quiero hacer una condición en una plantilla de AngularJS. Obtengo una lista de videos de la API de Youtube. Algunos de los videos tienen una proporción de 16:9 y otros tienen una proporción de 4:3.
Quiero hacer una condición como esta:
if video.yt$aspectRatio equals widescreen then
element's attr height="270px"
else
element's attr height="360px"
Estoy iterando los videos usando ng-repeat. No tengo idea de qué debo hacer para esta condición:
- ¿Agregar una función en el alcance?
- ¿Lo hace en plantilla?
Angularjs (versiones inferiores a 1.1.5) no proporciona la if/elsefuncionalidad. A continuación se presentan algunas opciones a considerar para lo que desea lograr:
( Salte a la actualización a continuación (#5) si está utilizando la versión 1.1.5 o superior )
1. Operador ternario:
Como sugirió @Kirk en los comentarios, la forma más limpia de hacerlo sería utilizar un operador ternario de la siguiente manera:
<span>{{isLarge ? 'video.large' : 'video.small'}}</span>
2. ng-switchdirectiva:
se puede utilizar algo como lo siguiente.
<div ng-switch on="video">
<div ng-switch-when="video.large">
<!-- code to render a large video block-->
</div>
<div ng-switch-default>
<!-- code to render the regular video block -->
</div>
</div>
3. ng-hide/ ng-showdirectivas
Alternativamente, también puede usar, ng-show/ng-hidepero al usar esto se renderizará tanto un video grande como un elemento de video pequeño y luego se ocultará el que cumple con la ng-hidecondición y se mostrará el que cumple con ng-showla condición. Entonces, en cada página representarás dos elementos diferentes.
4. Otra opción a considerar es ng-classla directiva.
Esto se puede utilizar de la siguiente manera.
<div ng-class="{large-video: video.large}">
<!-- video block goes here -->
</div>
Lo anterior básicamente agregará una large-videoclase CSS al elemento div si video.largees cierto.
ACTUALIZACIÓN: Angular 1.1.5 introdujo elngIf directive
5. ng-ifdirectiva:
En las versiones anteriores 1.1.5puedes usar la ng-ifdirectiva. Esto eliminaría el elemento si la expresión proporcionada regresa falsey lo reinserta elementen el DOM si la expresión regresa true. Se puede utilizar de la siguiente manera.
<div ng-if="video == video.large">
<!-- code to render a large video block-->
</div>
<div ng-if="video != video.large">
<!-- code to render the regular video block -->
</div>
En la última versión de Angular (a partir de 1.1.5), han incluido una directiva condicional llamada ngIf. Es diferente de ngShowy ngHideen que los elementos no están ocultos, pero no están incluidos en el DOM en absoluto. Son muy útiles para componentes costosos de crear pero que no se utilizan:
<div ng-if="video == video.large">
<!-- code to render a large video block-->
</div>
<div ng-if="video != video.large">
<!-- code to render the regular video block -->
</div>
