Bagaimana cara mengatur atribut id elemen HTML secara dinamis dengan angularjs (1.x)?

Jawaban:

393

ngAttr arahan benar-benar dapat membantu di sini, seperti yang diperkenalkan dalam dokumentasi resmi

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

Misalnya, untuk menetapkan nilai idatribut divelemen, sehingga mengandung indeks, fragmen tampilan mungkin berisi

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

yang akan diinterpolasi ke

<div id="object-1"></div>
Thierry Marianne
sumber
1
Dari mana datangnya myScopeObject? Di mana saya akan mendefinisikannya?
Jan Aagaard
1
@JanAagaard Mari kita asumsikan myScopeObjectadalah properti dari scopeobjek yang diekspos menggunakan controller Silakan lihat juga docs.angularjs.org/guide/controller . Apakah itu cukup jelas untuk Anda atau harus saya jelaskan lebih lanjut?
Thierry Marianne
saya memang ng-attr-id = "{{'Panel' + file.Id}}" tetapi tidak menghasilkan id = "Panel12312" untuk saya :(
Manuel Maestrini
17
Bukankah dua perilaku berikut identik: <div id="{{ 'object' + index }}">dan <div ng-attr-id="{{ 'object' + index }}">? Docs tampaknya mengatakan prapenggunaan ng-attr-adalah untuk membantu kasus-kasus di mana elemennya adalah sesuatu yang tidak standar, seperti tidak a <div>. Apakah saya membaca dokumen dengan benar?
broc.seib
3
@ broc.seib menggunakan nd-attr bukan hanya tentang standar. Ini adalah praktik yang baik karena penerjemah HTML dapat menetapkan id ke elemen sebelum angular dimuat. Dan ng-attr memastikan untuk menetapkan id ke elemen hanya ketika sudut dimuat. sama halnya dengan ng-src di tag <img>.
Alex
70

Hal ini bekerja dengan baik untuk saya:

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

Tanveer Shaikh
sumber
Waktu berlalu dan mungkin, sintaks yang paling intuitif sekarang hanya berfungsi seperti yang diharapkan. Saya ingat memiliki beberapa masalah saat mengulangi daftar.
Thierry Marianne
2
Ini akan berfungsi dengan benar dalam 90% kasus, tetapi Anda terkadang mendapatkan kesalahan yang sulit di-debug. Anda harus menggunakan ng-attr-id sebagai gantinya.
Baki
ng-attr-idmenguntungkan dalam 0% situasi. Tidak ada contoh yang dapat diberikan, karena tidak ada contoh.
omikes
5
The ng-attr-idmetode adalah untuk memastikan bahwa ekspresi ng baku tidak pernah diberikan dalam atribut HTML yang valid (misalnya id, label, dll). Ini untuk menghentikan setiap penggunaan hilir yang membaca 'sampah' (mis. Sebelum render selesai, atau setelah crash js)
Overflew
34

Jika Anda datang ke pertanyaan ini tetapi terkait dengan versi Angular yang lebih baru > = 2.0 .

<div [id]="element.id"></div>
SoEzPz
sumber
3
Itu tidak berguna, pertanyaannya adalah dalam konteks AngularJS
btk
8
Saya setuju; itu hanya akan bermanfaat bagi para anggota yang merasa bermanfaat.
SoEzPz
16
Beberapa anggota masih mengklik tautan Angular meskipun mereka mencari tautan Angular. Agak membingungkan dan kesalahan akan terus terjadi.
SoEzPz
24

Cara yang lebih elegan yang saya temukan untuk mencapai perilaku ini adalah:

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

Untuk implementasi saya, saya ingin setiap elemen input dalam pengulangan untuk masing-masing memiliki id unik untuk mengaitkan label dengan. Jadi untuk array objek yang terkandung di dalam myScopeObjects kita bisa melakukan ini:

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

Mampu menghasilkan id unik dengan cepat bisa sangat berguna saat menambahkan konten secara dinamis seperti ini.

Cumulo Nimbus
sumber
Saya pikir pendekatan ini memiliki masalah. Saya menginisialisasi pengikatan sudut setelah halaman dimuat. Sekarang kadang-kadang div gagal memuat dengan benar yang saya kira karena clash of id dari div yang berbeda.
sumeet
Menarik. Jika Anda bisa mereproduksi perilaku Anda dalam contoh plunker, saya akan senang untuk memeriksanya. Apakah menggunakan 'ng-attr-id =' berfungsi dan hanya menggunakan 'id =' tidak?
Cumulo Nimbus
9

Anda cukup melakukan hal berikut

Di js Anda

$scope.id = 0;

Dalam templat Anda 

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

yang akan membuat

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

Tidak perlu digabungkan di dalam kurung keriting ganda.

emil.c
sumber
3

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

D. Mohamed
sumber
Mengapa $ di depan indeks?
Pipo
Saya pikir itu mungkin karena itu seharusnya di ng-repeat?
gian1200
Tepat @Pipo Anda harus, mungkin, periksa di sini docs.angularjs.org/api/ng/directive/ngRepeat :)
D. Mohamed
0

Jika Anda menggunakan sintaks ini:

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

Angular akan membuat sesuatu seperti:

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

Namun sintaks ini:

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

akan menghasilkan sesuatu seperti:

<div id="object-1"></div>
K Rajesh Kumar
sumber
6
Jelaskan apa yang ingin Anda katakan?
Kumar
6
Kenapa harus ng-attr-idbuat ng-id..? itu salah. Saya ingin tahu siapa yang memperbaiki ini
TJ