javascript - Hur sätter man id-attributet för ett HTML-element dynamiskt med angularjs (1.x)?

Givet ett HTML-element av typen div, hur sätter man värdet på dess id-attribut, vilket är sammanfogningen av en scopvariabel och en sträng?

Svar #1

ngAttr-direktivet kan vara till stor hjälp här, som introduceras i den officiella dokumentationen

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

Till exempel, för att ställa in id-attributets värde på ett div-element, så att det innehåller ett index, kan ett vyfragment innehålla

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

vilket skulle interpoleras till

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

Svar #2

Den här saken fungerade ganska bra för mig:

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

Svar #3

Om du kom till denna fråga men relaterad till nyare Angular-version >= 2.0.

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

Svar #4

Ett mer elegant sätt jag har hittat för att uppnå detta beteende är helt enkelt:

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

För min implementation ville jag att varje input-element i en ng-repeat skulle ha ett unikt id för att koppla etiketten till. Så för en array av objekt som finns i myScopeObjects kunde man göra så här:

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

Att kunna generera unika ID:n på direkten kan vara ganska användbart när man dynamiskt lägger till innehåll som detta.

Svar #5

Du kan helt enkelt göra följande

I din js

$scope.id = 0;

I din mall

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

vilket kommer att återge

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