angularjs-directive ng-if - ¿Cuál es la mejor manera de aplicar condicionalmente atributos en AngularJS?




directivas style (10)

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>

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é?


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

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

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'"> 

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.


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 %


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 :)


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);
}

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)


<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>


También hay $watchGroup y $watchCollection . Específicamente, $watchGroup es realmente útil si desea llamar a una función para actualizar un objeto que tiene múltiples propiedades en una vista que no es un objeto dom, por ejemplo, otra vista en lienzo, webGL o solicitud de servidor. Aquí, el link la documentación.







angularjs angularjs-directive