Comment définir dynamiquement l'attribut id d'un élément HTML avec angularjs (1.x)?
Fourni 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 ?
6 réponses
ngAttr directive peut totalement être utile ici, comme introduit 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>
Cette chose a assez bien fonctionné pour moi:
<div id="{{ 'object-' + $index }}"></div>
Une façon plus élégante que j'ai trouvée pour atteindre ce comportement est simplement:
<div id="{{ 'object-' + myScopeObject.index }}"></div>
Pour mon implémentation, je voulais que chaque élément d'entrée dans un ng-repeat ait un identifiant unique pour 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>
Être capable de générer des identifiants uniques à la volée peut être très utile lors de l'ajout dynamique de contenu comme celui-ci.
Au cas où vous arriveriez à cette question mais lié à la version plus récente Angular > = 2.0 .
<div [id]="element.id"></div>
, 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 à l'intérieur de doubles accolades.
Si vous utilisez cette syntaxe:
<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>
Angulaire 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>