¿Cuál es la mejor manera de aplicar atributos de manera condicional en AngularJS?

Necesito poder agregar, por ejemplo, “contenteditable” a los elementos, en función de una variable booleana en el scope.

Ejemplo de uso:

{{content.title}}

$scope.editMode contenteditable = true se agrega al elemento si $scope.editMode se estableció en true . ¿Hay alguna manera fácil de implementar este comportamiento de atributos tipo ng-class? Estoy considerando escribir una directiva y compartir si no.

Editar: Puedo ver que parece haber algunas similitudes entre mi propuesta de directiva attrs y ng-bind-attrs, pero fue eliminada en 1.0.0.rc3 , ¿por qué?

Estoy usando lo siguiente para configurar condicionalmente la clase attr cuando ng-class no se puede usar (por ejemplo, al diseñar SVG):

 ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false' }}" 

El mismo enfoque debería funcionar para otros tipos de atributos.

(Creo que necesitas estar en el último Angular inestable para usar ng-attr-, actualmente estoy en 1.1.4)

Puede prefijar atributos con ng-attr para evaluar una expresión angular. Cuando el resultado de las expresiones indefinidas, esto elimina el valor del atributo.

 Hello World 

Producirá (cuando el valor sea falso)

 Hello World 

Entonces no use https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false porque eso producirá la palabra “falso” como el valor.

 Hello World 

Al usar este truco en una directiva. Los atributos de la directiva serán falsos si les falta un valor.

Por ejemplo, lo anterior sería falso.

 function post($scope, $el, $attr) { var url = $attr['href'] || https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false; alert(url === https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false); } 

Lo hice trabajando estableciendo el atributo. Y controlando la aplicabilidad del atributo usando el valor booleano para el atributo.

Aquí está el fragmento de código:

 

Espero que esto ayude.

En la última versión de Angular (1.1.5), han incluido una directiva condicional llamada ngIf . Es diferente de ngShow y ngHide porque los elementos no están ocultos, pero no están incluidos en el DOM en absoluto. Son muy útiles para componentes que son costosos de crear pero que no se usan:

 

{{content.title}}

Para que un atributo muestre un valor específico basado en una verificación booleana, o se omita por completo si la verificación booleana falla, utilicé lo siguiente:

ng-attr-example="{{params.type == 'test' ? 'itWasTest' : undefined }}"

Ejemplo de uso:

o

basado en el valor de params.type

{{content.title}}

producirá cuando isTrue = true:

{{content.title}}

y cuando isTrue = https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false:

{{content.title}}

De hecho, escribí un parche para hacer esto hace unos meses (después de que alguien preguntara por él en #angularjs en freenode).

Probablemente no se combinará, pero es muy similar a ngClass: https://github.com/angular/angular.js/pull/4269

Tanto si se fusiona como si no, las cosas ng-attr- * existentes probablemente sean adecuadas para sus necesidades (como han mencionado otros), aunque podría ser un poco más complicado que la funcionalidad más ngClass-style que está sugiriendo.

En cuanto a la solución aceptada, la publicada por Ashley Davis, el método descrito aún imprime el atributo en el DOM, independientemente del hecho de que el valor que se le ha asignado no está definido.

Por ejemplo, en un campo de entrada configurado con un ng-model y un atributo de valor:

  

Independientemente de lo que hay detrás de myValue, el atributo de valor aún se imprime en el DOM, por lo tanto, se interpreta. Ng-model entonces, queda anulado.

Un poco desagradable, pero usando ng-si funciona el truco:

   

Recomendaría usar una verificación más detallada dentro de las directivas ng-if 🙂

También puedes usar una expresión como esta:

 

Para validación de campo de entrada puede hacer:

  

Esto aplicará el atributo max a 100 solo si discountType se define como %

En caso de que necesite una solución para Angular 2, entonces es simple, use la función de enlace como a continuación, por ejemplo, desea hacer que la entrada sea solo de lectura condicional, luego agregue llaves cuadradas el attrbute seguido de = signo y expresión.