Jak ustawić atrybut id elementu HTML dynamicznie za pomocą angularjs (1.x)?

To coś działało na mnie całkiem nieźle:

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

Bardziej eleganckim sposobem, jaki znalazłem, aby osiągnąć to zachowanie, jest po prostu:

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

Dla mojej implementacji chciałem, aby każdy element wejściowy w ng-repeat miał unikalny identyfikator, z którym można powiązać Etykietę. Tak więc dla tablicy obiektów zawartych w obiektach myScopeObjects można to zrobić:

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

Możliwość generowania unikalnych identyfikatorów w locie może być bardzo przydatna przy dynamicznym dodawaniu takich treści.

W przypadku gdybyś przyszedł do tego pytania, ale związane z nowszą Wersja kątowa > = 2.0.

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

Możesz po prostu wykonać następujące czynności]}

W Twoim js

$scope.id = 0;

W szablonie

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

Który wyrenderuje

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

Nie jest konieczne łączenie wewnątrz podwójnych nawiasów klamrowych.

Jeśli używasz tej składni:

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

Angular renderuje coś w stylu:

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

Jednak ta składnia:

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

Wygeneruje coś w stylu:

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