javascript - Jak nastavit atribut id HTML elementu dynamicky pomocí angularjs (1.x)?

Máme-li HTML element typu div, jak nastavit hodnotu jeho atributu id, která je konkatenací proměnné v daném rozsahu a řetězce?

Odpověď č. 1

Direktiva ngAttr může být zde naprosto užitečná, jak je uvedeno v oficiální dokumentaci

https://docs.angularjs.org/guide/interpolation#-ngattr-pro-vázání-na-libovolné-atributy

Například, k nastavení hodnoty atributu id u elementu div, tak aby obsahoval index, může fragment zobrazení obsahovat

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

který by byl interpolován na

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

Odpověď č. 2

Tahle věc mi fungovala docela dobře:

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

Odpověď č. 3

V případě, že jste na tuto otázku narazili, ale týká se novější verze Angular >= 2.0.

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

Odpověď č. 4

Elegantnější způsob, který jsem našel k dosažení tohoto chování, je jednoduše:

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

Pro svou implementaci jsem chtěl, aby každý vstupní prvek v ng-repeat měl jedinečné ID, se kterým by bylo možné propojit štítek. Takže pro pole objektů obsažené v myScopeObjects by se to dalo udělat takto:

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

Možnost generovat jedinečná ID za běhu může být docela užitečná při dynamickém přidávání obsahu, jako je tento.

Odpověď č. 5

Můžete jednoduše udělat následující

Ve vašem js

$scope.id = 0;

Ve vašem šabloně

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

který vykreslí

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