HTML öğesinin id niteliğini angularjs (1.x) ile dinamik olarak nasıl ayarlayabilirim?

Bir HTML öğesi türü sağladığında, kapsam değişkeninin ve dizenin birleşimi olan özniteliğinin divdeğeri nasıl ayarlanır id?

ngAttr Direktif, resmi belgelerde belirtildiği gibi burada tamamen yardımcı olabilir

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

Örneğin id, bir divöğenin öznitelik değerini bir dizin içerecek şekilde ayarlamak için , bir görünüm parçası

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

hangi enterpolasyona girer

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

Bu şey benim için oldukça iyi çalıştı:

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

Bu soruya geldiyseniz ancak daha yeni Açısal sürüm> = 2.0 ile ilgili olması durumunda .

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

Bu davranışı elde etmek için bulduğum daha zarif bir yol:

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

Benim uygulama için her giriş öğesinin ng-tekrar her etiket ile ilişkilendirmek için benzersiz bir kimliği olmasını istedim. Yani myScopeObjects içinde bulunan bir dizi nesne için bunu yapabilirsiniz:

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

Bu tür içeriği dinamik olarak eklerken anında benzersiz kimlikler oluşturabilmek oldukça yararlı olabilir.

Sadece aşağıdakileri yapabilirsiniz

Senin js

$scope.id = 0;

Şablonunuzda

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

hangisi render edecek

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

Çift kıvrımlı parantez içinde birleştirmek gerekli değildir.

Sadece <input id="field_name_{{$index}}" />

Bu sözdizimini kullanırsanız:

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

Açısal:

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

Ancak bu sözdizimi:

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

şöyle bir şey üretecek:

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