web-dev-qa-db-fra.com

Comment définir l'attribut id d'un élément HTML de manière dynamique avec angularjs (1.x)?

Pour un élément HTML de type div, comment définir la valeur de son attribut id, qui est la concaténation d'une variable de portée et d'une chaîne? 

javascriptangularjsangularjs-scopestring-concatenation
234
Thierry Marianne

La directive ngAttr peut tout à fait aider ici, comme cela a été présenté dans la documentation officielle 

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

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

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

qui serait interpolée à

<div id="object-1"></div>
361
Thierry Marianne

Cette chose a bien fonctionné pour moi:

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

57
Tanveer Shaikh

Une façon plus élégante que j'ai trouvée pour obtenir ce comportement est simplement:

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

Pour ma mise en œuvre, je voulais que chaque élément d’entrée d’une répétition-ng ait 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 s'avérer très utile lors de l'ajout dynamique d'un contenu comme celui-ci.

22
Cumulo Nimbus

Au cas où vous en seriez venu à cette question, mais en rapport avec la nouvelle version Angular> = 2.0.

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

Vous pouvez simplement faire ce qui suit

Dans ton js

$scope.id = 0;

Dans votre template 

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

qui rendra

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

Il n'est pas nécessaire de concaténer à l'intérieur de doubles accolades.

9
emil.c

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>
1
K Rajesh Kumar

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

1
D. Mohamed