Pourvu d'un élément HTML de type div, comment définir la valeur de son idattribut, qui est la concaténation d'une variable de portée et d'une chaîne?
Pourvu d'un élément HTML de type div, comment définir la valeur de son idattribut, qui est la concaténation d'une variable de portée et d'une chaîne?
Réponses:
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>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?
<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?
Cette chose a très bien fonctionné pour moi:
<div id="{{ 'object-' + $index }}"></div>
ng-attr-idest avantageux dans 0% des situations. Aucun exemple ne peut être fourni, car il n'y en a pas.
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)
Dans le cas où vous êtes venu à cette question mais lié à une nouvelle version angulaire> = 2.0 .
<div [id]="element.id"></div>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.
Juste <input id="field_name_{{$index}}" />
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>ng-attr-idcréer ng-id..? c'est faux. Je me demande qui vote positivement
myScopeObjectvient-il? Où pourrais-je le définir?