style ngstyle html angularjs

html - ngstyle - ng-style conditional



Condicionales de AngularJS en el atributo HTML (2)

¿Cómo cambiarías un atributo html basado en el modelo?

Estoy intentando cambiar el texto del marcador de posición de una entrada en función de la longitud de una matriz:

<input placeholder="{{todos.length ? ''Insert todo'' : ''Insert your first todo''}}" />

Pero eso no parece funcionar ...

Ejemplo de código JS Bin .


El operador ternario no parece funcionar en este caso, en lugar de hacerlo

{{cond ? true : false}}

Cambiarlo a

{{ exp && true || false }}

Entonces su atributo de placeholder se vería así (lo he reducido para propósitos de demostración)

placeholder="{{todos.length > 0 && ''Insert'' || ''Insert first''}}"


Para cualquier persona que se encuentre con esto (como acabo de hacerlo a través de Google), parece que Angular recientemente agregó soporte para el operador ternario en expresiones. Simplemente lo usé con éxito en 1.2.16 para actualizar dinámicamente un atributo de información sobre herramientas (título). Parece que apareció por primera vez en la documentación de 1.2.17, aunque en general todavía desalientan su uso:

De: AngularJS: Guía del desarrollador: Expresiones

Aparte del operador ternario (a? B: c), no puede escribir una declaración de flujo de control en una expresión. La razón detrás de esto es el núcleo de la filosofía angular de que la lógica de la aplicación debe estar en los controladores, no en las vistas. Si necesita un condicional real, un bucle o para lanzar desde una expresión de vista, delegue en un método de JavaScript en su lugar.