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

Odpowiedzi:

392

ngAttr Dyrektywa może tu całkowicie pomóc, jak wprowadzono w oficjalnej dokumentacji

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

Na przykład, aby ustawić idwartość atrybutu divelementu, tak aby zawierał indeks, fragment widoku może zawierać

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

który zostanie interpolowany do

<div id="object-1"></div>
Thierry Marianne
źródło
1
Skąd myScopeObjectpochodzi? Gdzie mam to zdefiniować?
Jan Aagaard
1
@JanAagaard Załóżmy, że myScopeObjectjest własnością scopeobiektu odsłoniętego za pomocą kontrolera. Zobacz także docs.quarejs.org/guide/controller . Czy to dla ciebie wystarczająco jasne, czy powinienem dalej opracowywać?
Thierry Marianne
Zrobiłem ng-attr-id = "{{'Panel' + file.Id}}", ale nie generuje dla mnie id = "Panel12312" :(
Manuel Maestrini
17
Czy następujące dwa zachowania nie są identyczne: <div id="{{ 'object' + index }}">i <div ng-attr-id="{{ 'object' + index }}">? Dokumenty zdają się mówić, że przygotowywanie ng-attr-ma pomóc w przypadkach, w których element jest czymś niestandardowym, na przykład nie <div>. Czy czytam dokumenty, prawda?
broc.seib
3
@ broc.seib przy użyciu nd-attr to nie tylko standard. Jest to dobra praktyka, ponieważ interpreter HTML może przypisać identyfikator do elementu, zanim załadowany zostanie kąt. Ng-attr zapewnia przypisanie id do elementu tylko po załadowaniu kąta. to samo dotyczy ng-src w znaczniku <img>.
Alex
70

Ta rzecz działała dla mnie całkiem dobrze:

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

Tanveer Shaikh
źródło
Czas płynie i być może najbardziej intuicyjna składnia działa teraz zgodnie z oczekiwaniami. Pamiętam pewne problemy podczas iteracji po liście.
Thierry Marianne
2
Działa to poprawnie w 90% przypadków, ale czasami mogą pojawić się błędy, które są trudne do debugowania. Zamiast tego powinieneś użyć ng-attr-id.
Baki,
ng-attr-idjest korzystny w 0% sytuacji. Nie można podać żadnych przykładów, ponieważ nie ma żadnych.
omikes
5
ng-attr-idSposobem jest zapewnienie, że surowe ng ekspresja nie staje się ważnym atrybutem HTML (na przykład id, labelitp). Ma to na celu powstrzymanie dalszego odczytu „śmieci” (np. Przed zakończeniem renderowania lub po awarii js)
Przepełniono
34

Na wypadek, gdybyś przyszedł do tego pytania, ale dotyczył nowszej wersji Angular> = 2.0 .

<div [id]="element.id"></div>
SoEzPz
źródło
2
To nie jest przydatne, pytanie jest w kontekście AngularJS
btk
8
Zgadzam się; przyda się tylko tym członkom, którzy uznają to za przydatne.
SoEzPz
16
Niektórzy członkowie nadal klikają linki Angularjs, nawet jeśli szukają linków Angular. Jest to trochę mylące i błędy będą nadal występować.
SoEzPz
24

Bardziej eleganckim sposobem na osiągnięcie tego zachowania jest po prostu:

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

Dla mojej implementacji chciałem, aby każdy element wejściowy w powtórzeniu ng miał niepowtarzalny identyfikator do powiązania etykiety. Tak więc dla tablicy obiektów zawartych w 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 podczas dynamicznego dodawania takich treści.

Cumulo Nimbus
źródło
Myślę, że to podejście ma problemy. Inicjuję wiązanie kątowe po załadowaniu strony. Czasami div nie ładuje się poprawnie, co, jak sądzę, jest spowodowane zderzeniem id różnych div.
sumeet
Ciekawy. Jeśli mógłbyś odtworzyć swoje zachowanie na przykładzie zrzędu, chętnie to sprawdzę. Czy używanie „ng-attr-id =” działa, a samo używanie „id =” nie?
Cumulo Nimbus,
9

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

W twoim js

$scope.id = 0;

W twoim szablonie 

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

co będzie renderowane

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

Nie jest konieczne łączenie w nawiasach klamrowych podwójnych.

emil.c
źródło
2

Właśnie <input id="field_name_{{$index}}" />

D. Mohamed
źródło
Dlaczego $ przed indeksem?
Pipo
Myślę, że to prawdopodobnie dlatego, że ma to być powtórzenie ng?
gian1200
Dokładnie @Pipo powinieneś, może być, sprawdź tutaj docs.quarejs.org/api/ng/directive/ng Powtórz :)
D. Mohamed
0

Jeśli użyjesz tej składni:

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

Angular renderuje coś takiego:

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

Jednak ta składnia:

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

wygeneruje coś takiego:

<div id="object-1"></div>
K Rajesh Kumar
źródło
6
Wyjaśnij, co próbujesz powiedzieć?
Kumar,
6
Dlaczego warto ng-attr-idtworzyć ng-id...? to jest źle. Zastanawiam się, kto to zagłosował
TJ