¿Cómo establecer el atributo id de un elemento HTML dinámicamente con angularjs (1.x)?

Respuestas:

393

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>
Thierry Marianne
fuente
1
De donde myScopeObjectviene ¿Dónde lo definiría?
Jan Aagaard
1
@JanAagaard Supongamos que 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?
Thierry Marianne
hice ng-attr-id = "{{'' Panel '+ file.Id}}" pero no genera id = "Panel12312" para mí :(
Manuel Maestrini
17
¿No son los dos siguientes idénticos en comportamiento: <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?
broc.seib
3
@ broc.seib usando nd-attr no es solo estándar. Esta es una buena práctica porque el intérprete HTML puede asignar una identificación al elemento antes de que se cargue angular. Y ng-attr garantiza asignar id al elemento solo cuando se carga angular. Lo mismo ocurre con ng-src en la etiqueta <img>.
Alex
70

Esto me funcionó bastante bien:

<div id="{{ 'object-' + $index }}"></div>

Tanveer Shaikh
fuente
El tiempo vuela y quizás, la sintaxis más intuitiva ahora solo funciona como se esperaba. Recuerdo haber tenido algunos problemas al iterar sobre una lista.
Thierry Marianne
2
Esto funcionará correctamente en el 90% de los casos, pero a veces puede obtener errores que son difíciles de depurar. Deberías usar ng-attr-id en su lugar.
Baki
ng-attr-idEs ventajoso en 0% de las situaciones. No se pueden proporcionar ejemplos, porque no hay ninguno.
omikes
55
El 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)
Sobrevoló el
34

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>
SoEzPz
fuente
3
Eso no es útil, la pregunta está en el contexto de AngularJS
btk
8
Estoy de acuerdo; solo será útil para aquellos miembros que lo encuentren útil.
SoEzPz
16
Algunos miembros aún hacen clic en los enlaces de Angularjs aunque estén buscando enlaces de Angular. Es un poco confuso y los errores continuarán ocurriendo.
SoEzPz
24

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.

Cumulo Nimbus
fuente
Creo que este enfoque tiene problemas. Estoy inicializando el enlace angular después de cargar la página. Ahora, a veces, el div no se carga correctamente, lo que supongo que se debe al choque de id de diferentes div.
sumeet
Interesante. Si pudiera reproducir su comportamiento en un ejemplo de plunker, me complacería comprobarlo. ¿Usar 'ng-attr-id =' funciona y solo usar 'id =' no?
Cumulo Nimbus
9

Podrías simplemente hacer lo siguiente

En tu js

$scope.id = 0;

En su plantilla 

<div id="number-{{$scope.id}}"></div>

que rendirá

<div id="number-0"></div>

No es necesario concatenar dentro de llaves dobles.

emil.c
fuente
3

Sólo <input id="field_name_{{$index}}" />

D. Mohamed
fuente
¿Por qué un $ delante del índice?
Pipo
Creo que probablemente se deba a que se supone que debe repetirse.
gian1200
Exacto @Pipo debería, puede ser, consultar aquí docs.angularjs.org/api/ng/directive/ngRepeat :)
D. Mohamed
0

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>
K Rajesh Kumar
fuente
66
¿Explica lo que estás tratando de decir?
Kumar
66
¿Por qué debería ng-attr-idcrear ng-id..? eso está mal. Me pregunto quién votará esto
TJ