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

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>


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>

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.


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.



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>

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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.