Comment définir dynamiquement l'attribut id d'un élément HTML avec angularjs (1.x)?

Réponses:

393

ngAttr La directive peut être totalement utile ici, comme présenté dans la documentation officielle

https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes

Par exemple, pour définir la idvaleur d'attribut d'un divélément, afin qu'il contienne un index, un fragment de vue peut contenir

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

qui serait interpolé à

<div id="object-1"></div>
Thierry Marianne
la source
1
D'où myScopeObjectvient-il? Où pourrais-je le définir?
Jan Aagaard
1
@JanAagaard Supposons que myScopeObjectla propriété d'un scopeobjet soit exposée à l'aide d'un contrôleur. Veuillez également consulter docs.angularjs.org/guide/controller . Est-ce assez clair pour vous ou dois-je développer davantage?
Thierry Marianne
j'ai fait ng-attr-id = "{{'Panel' + file.Id}}" mais cela ne génère pas id = "Panel12312" pour moi :(
Manuel Maestrini
17
Les deux comportements suivants ne sont-ils pas identiques: <div id="{{ 'object' + index }}">et <div ng-attr-id="{{ 'object' + index }}">? Les documents semblent dire que le préfixe ng-attr-est d'aider dans les cas où l'élément est quelque chose de non standard, comme pas un <div>. Suis-je en train de lire les documents à droite?
broc.seib
3
@ broc.seib en utilisant nd-attr n'est pas seulement une question de standard. C'est une bonne pratique car l'interpréteur HTML peut attribuer un identifiant à l'élément avant le chargement angulaire. Et ng-attr garantit d'affecter id à l'élément uniquement lorsque l'angulaire est chargé. c'est le cas pour ng-src dans la balise <img>.
Alex
70

Cette chose a très bien fonctionné pour moi:

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

Tanveer Shaikh
la source
Le temps passe vite et peut-être que la syntaxe la plus intuitive fonctionne maintenant comme prévu. Je me souviens avoir eu quelques problèmes lors de l'itération d'une liste.
Thierry Marianne
2
Cela fonctionnera correctement dans 90% des cas, mais vous pouvez parfois obtenir des erreurs difficiles à déboguer. Vous devez plutôt utiliser ng-attr-id.
Baki
ng-attr-idest avantageux dans 0% des situations. Aucun exemple ne peut être fourni, car il n'y en a pas.
omikes
5
La ng-attr-idméthode consiste à faire en sorte que l'expression ng brut est jamais rendu dans un attribut HTML valide (par exemple id, labeletc.). Ceci permet d'empêcher toute utilisation en aval de lire les «ordures» (par exemple avant que le rendu ne soit terminé, ou après un crash js)
Overflew
35

Dans le cas où vous êtes venu à cette question mais lié à une nouvelle version angulaire> = 2.0 .

<div [id]="element.id"></div>
SoEzPz
la source
3
Ce n'est pas utile, la question est dans le contexte d'AngularJS
btk
9
Je suis d'accord; cela ne sera utile qu'aux membres qui le jugent utile.
SoEzPz
16
Certains membres cliquent toujours sur les liens Angularjs même s'ils recherchent des liens Angular. C'est un peu déroutant et des erreurs continueront de se produire.
SoEzPz
24

Une manière plus élégante que j'ai trouvée pour obtenir ce comportement est simplement:

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

Pour mon implémentation, je voulais que chaque élément d'entrée dans une répétition ng ait chacun un identifiant unique auquel associer l'étiquette. Donc, pour un tableau d'objets contenus dans myScopeObjects, on pourrait faire ceci:

<div ng-repeat="object in myScopeObject">
    <input id="{{object.name + 'Checkbox'}}" type="checkbox">
    <label for="{{object.name + 'Checkbox'}}">{{object.name}}</label>
</div>

Pouvoir générer des identifiants uniques à la volée peut être très utile lors de l'ajout dynamique de contenu comme celui-ci.

Cumulo Nimbus
la source
Je pense que cette approche a des problèmes. J'initialise la liaison angulaire après le chargement de la page. Maintenant, parfois, le div ne parvient pas à se charger correctement, ce qui, je suppose, est dû au choc de l'identifiant de div différent.
sumeet
Intéressant. Si vous pouviez reproduire votre comportement dans un exemple de plongeur, je serais heureux de le vérifier. Est-ce que l'utilisation de 'ng-attr-id =' fonctionne et que l'utilisation de 'id =' ne fonctionne pas?
Cumulo Nimbus
9

Vous pouvez simplement faire ce qui suit

Dans votre js

$scope.id = 0;

Dans votre modèle 

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

qui rendra

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

Il n'est pas nécessaire de concaténer les crochets intérieurs doubles.

emil.c
la source
3

Juste <input id="field_name_{{$index}}" />

D. Mohamed
la source
Pourquoi un $ devant l'index?
Pipo
Je pense que c'est probablement parce que c'est censé être dans une répétition ng?
gian1200
Exact. @Pipo vous devriez, peut-être, consultez ici docs.angularjs.org/api/ng/directive/ngRepeat :)
D. Mohamed
0

Si vous utilisez cette syntaxe:

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

Angular rendra quelque chose comme:

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

Cependant cette syntaxe:

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

va générer quelque chose comme:

<div id="object-1"></div>
K Rajesh Kumar
la source
6
Expliquez ce que vous essayez de dire?
Kumar
6
Pourquoi ng-attr-idcréer ng-id..? c'est faux. Je me demande qui vote positivement
TJ