directivas - ng-style angularjs

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

Question

Necesito poder agregar, por ejemplo, "contenteditable" a elementos, basado en una variable booleana en alcance

Ejemplo de uso:

<h1 attrs="{''contenteditable=/"true/"'': editMode}">{{content.title}}</h1>

El resultado sería que contenteditable = true se agregue al elemento si $scope.editMode se configuró como true . ¿Hay alguna manera fácil de implementar este comportamiento de atributo de clase ng? Estoy considerando escribir una directiva y compartir si no.

Edit: puedo ver que parece haber algunas similitudes entre mi propuesta de directiva attrs y ng-bind-attrs, pero se eliminó en 1.0.0.rc3 , ¿por qué?

Answer 1

Con respecto 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 ha asignado no está definido.

Por ejemplo, en una configuración de campo de entrada con un modelo ng y un atributo de valor:

<input type="text" name="myInput" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />

Independientemente de lo que haya detrás de myValue, el atributo de valor aún se imprime en el DOM, por lo tanto, se interpreta. Ng-modelo entonces, se anula.

Un poco desagradable, pero usar ng-if tiene el truco:

<input type="text" name="myInput" data-ng-if="value" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />
<input type="text" name="myInput" data-ng-if="!value" data-ng-model="myModel" />

Recomendaría utilizar un control más detallado dentro de las directivas ng-if :)

Answer 2

Conseguí esto trabajando duro estableciendo el atributo. Y controlar la aplicabilidad del atributo utilizando el valor booleano para el atributo.

Aquí está el fragmento de código:

<div contenteditable="{{ condition ? ''true'' : ''false''}}"></div>

Espero que esto ayude.

Answer 3

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

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

Ya sea que se fusione o no, el material ng-attr- * existente es probablemente adecuado para sus necesidades (como han mencionado otros), aunque podría ser un poco más desquiciado que la funcionalidad más ngClass-style que sugiere.

Answer 4

En caso de que necesite una solución para Angular 2, entonces es sencillo, use el enlace de propiedades como el que se muestra a continuación, por ejemplo, si desea que la entrada se lea solo de forma condicional, a continuación, agregue entre corchetes el símbolo de acceso seguido de = signo y expresión.

<input [readonly]="mode==''VIEW''"> 

Answer 5

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

<h1 ng-if="editMode" contenteditable=true>{{content.title}}</h1>

Answer 6

Estoy usando lo siguiente para establecer condicionalmente la clase attr cuando no se puede usar ng-class (por ejemplo, al estilo de SVG):

ng-attr-class="{{someBoolean && ''class-when-true'' || ''class-when-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)

Answer 7

Para la validación del campo de entrada puede hacer:

<input ng-model="discount" type="number" ng-attr-max="{{discountType == ''%'' ? 100 : undefined}}">

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

Answer 8

Para obtener un atributo que muestre un valor específico basado en un control booleano, o que se omita por completo si el control booleano falla, usé lo siguiente:

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

Ejemplo de uso:

<div ng-attr-class="{{params.type == ''test'' ? ''itWasTest'' : undefined }}">

<div class="itWasTest"> o <div> función del valor de params.type

Answer 9

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

<a ng-attr-href="{{value || undefined}}">Hello World</a>

Producirá (cuando el valor es falso)

<a ng-attr-href="{{value || undefined}}" href>Hello World</a>

Por lo tanto, no use false porque eso producirá la palabra "falso" como valor.

<a ng-attr-href="{{value || false}}" href="false">Hello World</a>

Cuando se utiliza este truco en una directiva. Los atributos de la directiva serán falsos si faltan un valor.

Por ejemplo, lo anterior sería falso.

function post($scope, $el, $attr) {
      var url = $attr[''href''] || false;
      alert(url === false);
}

Answer 10

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

<h1 ng-attr-contenteditable="{{ editMode ? true : false }}"></h1>

Answer 11

<h1 ng-attr-contenteditable="{{isTrue || undefined }}">{{content.title}}</h1>

producirá cuando isTrue = true: <h1 contenteditable="true">{{content.title}}</h1>

y cuando es verdad = falso: <h1>{{content.title}}</h1>