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

funciones en angularjs

Question

Proporcionó un elemento HTML de tipo div , cómo establecer el valor de su atributo id , ¿cuál es la concatenación de una variable de alcance y una cadena?

Answer 1

En caso de que haya llegado a esta pregunta, pero relacionado con la versión Angular más nueva > = 2.0 .

<div [id]="element.id"></div>

Answer 2

Esto me funcionó bastante bien:

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

Answer 3

Si usas esta sintaxis:

<div ng-attr-id="{{ ''object-'' + myScopeObject.index }}"></div>

Angular renderizará 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>

Answer 4

Simplemente puedes hacer lo siguiente

En tus js

$scope.id = 0;

En tu plantilla

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

el cual hará

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

No es necesario concatenar dentro de dobles llaves.

Answer 5

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 a cada uno tenga un ID único con el que asociar la etiqueta. Entonces, para una matriz de objetos contenidos dentro de myScopeObjects, uno 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 identificaciones únicas sobre la marcha puede ser bastante útil cuando se agrega dinámicamente contenido como este.

Answer 6

ngAttr directiva ngAttr 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 valor del atributo id de un elemento div , para que contenga un índice, un fragmento de vista podría contener

<div ng-attr-id="{{ ''object-'' + myScopeObject.index }}"></div>

que se interpolaría a

<div id="object-1"></div>