Proporcionado un elemento HTML de tipo div, ¿cómo establecer el valor de su idatributo, que es la concatenación de una variable de alcance y una cadena?
Proporcionado un elemento HTML de tipo div, ¿cómo establecer el valor de su idatributo, que es la concatenación de una variable de alcance y una cadena?
Respuestas:
ngAttr La directiva puede ser de gran ayuda aquí, tal como se presenta en la documentación oficial
https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes
Por ejemplo, para establecer el idvalor de atributo de un divelemento, de modo que contenga un índice, un fragmento de vista puede contener
<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>que se interpolaría a
<div id="object-1"></div>myScopeObjectes una propiedad de un scopeobjeto expuesto utilizando un controlador. Consulte también docs.angularjs.org/guide/controller . ¿Eso es lo suficientemente claro para ti o debo explicarlo más?
<div id="{{ 'object' + index }}">y <div ng-attr-id="{{ 'object' + index }}">? Los documentos parecen decir que anteponer ng-attr-es ayudar en casos donde el elemento es algo no estándar, como no un <div>. ¿Estoy leyendo los documentos correctamente?
Esto me funcionó bastante bien:
<div id="{{ 'object-' + $index }}"></div>
ng-attr-idEs ventajoso en 0% de las situaciones. No se pueden proporcionar ejemplos, porque no hay ninguno.
ng-attr-idmétodo es para asegurar que la expresión ng cruda nunca es generado en un atributo HTML válido (por ejemplo id, label, etc). Esto es para detener cualquier uso posterior que lea ng 'basura' (por ejemplo, antes de que se complete el renderizado, o después de un bloqueo de js)
En caso de que haya llegado a esta pregunta pero esté relacionado con la versión angular más nueva > = 2.0 .
<div [id]="element.id"></div>Una forma más elegante que encontré para lograr este comportamiento es simplemente:
<div id="{{ 'object-' + myScopeObject.index }}"></div>Para mi implementación, quería que cada elemento de entrada en una repetición ng tuviera una identificación única para asociar la etiqueta. Entonces, para una matriz de objetos contenidos dentro de myScopeObjects, se podría hacer esto:
<div ng-repeat="object in myScopeObject">
<input id="{{object.name + 'Checkbox'}}" type="checkbox">
<label for="{{object.name + 'Checkbox'}}">{{object.name}}</label>
</div>Ser capaz de generar identificadores únicos sobre la marcha puede ser muy útil al agregar dinámicamente contenido como este.
Sólo <input id="field_name_{{$index}}" />
Si usa esta sintaxis:
<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>Angular representará algo como:
<div ng-id="object-1"></div>Sin embargo, esta sintaxis:
<div id="{{ 'object-' + $index }}"></div>generará algo como:
<div id="object-1"></div>ng-attr-idcrear ng-id..? eso está mal. Me pregunto quién votará esto
myScopeObjectviene ¿Dónde lo definiría?