Pod warunkiem elementu HTML typu div
, jak ustawić wartość jego id
atrybutu, który jest konkatenacją zmiennej zasięgu i łańcucha?
Pod warunkiem elementu HTML typu div
, jak ustawić wartość jego id
atrybutu, który jest konkatenacją zmiennej zasięgu i łańcucha?
Odpowiedzi:
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ć id
wartość atrybutu div
elementu, 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>
myScopeObject
jest własnością scope
obiektu 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ć?
<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?
Ta rzecz działała dla mnie całkiem dobrze:
<div id="{{ 'object-' + $index }}"></div>
ng-attr-id
jest korzystny w 0% sytuacji. Nie można podać żadnych przykładów, ponieważ nie ma żadnych.
ng-attr-id
Sposobem jest zapewnienie, że surowe ng ekspresja nie staje się ważnym atrybutem HTML (na przykład id
, label
itp). Ma to na celu powstrzymanie dalszego odczytu „śmieci” (np. Przed zakończeniem renderowania lub po awarii js)
Na wypadek, gdybyś przyszedł do tego pytania, ale dotyczył nowszej wersji Angular> = 2.0 .
<div [id]="element.id"></div>
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.
Właśnie <input id="field_name_{{$index}}" />
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>
ng-attr-id
tworzyć ng-id
...? to jest źle. Zastanawiam się, kto to zagłosował
myScopeObject
pochodzi? Gdzie mam to zdefiniować?