AngularJS: Bagaimana cara mengatur variabel di dalam template?

Bagaimana saya bisa menghindari {{f = ...}}pernyataan di baris ketiga mencetak isinya forecast[day.iso]?

Saya ingin menghindari penggunaan forecast[day.iso].temperaturedan seterusnya untuk setiap iterasi.

<div ng-repeat="day in forecast_days">
  {{$index}} - {{day.iso}} - {{day.name}}
  {{f = forecast[day.iso]}}
  Temperature: {{f.temperature}}<br>
  Humidity: {{f.humidity}}<br>
  ...
</div>

javascript angularjs ng-init

— Daniel F
sumber

Ini mungkin bukan jawaban, tetapi tip yang berguna adalah menggunakan {{f = forecast [day.iso]; ""}} karena tidak akan mencetak apa pun pada tampilan.

— Matt Leonowicz

Jawaban:

189

Gunakan ngInit : https://docs.angularjs.org/api/ng/directive/ngInit

<div ng-repeat="day in forecast_days" ng-init="f = forecast[day.iso]">
  {{$index}} - {{day.iso}} - {{day.name}}
  Temperature: {{f.temperature}}<br>
  Humidity: {{f.humidity}}<br>
  ...
</div>

Contoh: http://jsfiddle.net/coma/UV4qF/

— koma
sumber

Jika Anda ingin lebih dari satu variabel pisahkan dengan titik koma ';'

— bentzy

Tip untuk yang belum tahu ... tergantung pada struktur templat Anda, Anda bisa berakhir dengan semua rekaman yang hanya menampilkan nilai terakhir variabel Anda (dalam kasus saya, Angular memperbarui substitusi pada siklus intisari berikutnya, karena semuanya terikat pada ekspresi yang sama)! Untuk mengatasi situasi ini, Anda dapat menetapkan variabel sebagai properti record saat ini yang sedang diiterasi (jika praktis untuk kasus penggunaan Anda). Dalam contoh di atas, ini akan menjading-init="day.f = forecast[day.iso]"

— John Rix

Ini bukan jawaban terbaik , tetapi ini juga merupakan pilihan: karena Anda dapat menggabungkan beberapa ekspresi, tetapi hanya ekspresi terakhir yang dirender, Anda dapat menyelesaikan ekspresi dengan ""dan variabel Anda akan disembunyikan.

Jadi, Anda bisa mendefinisikan variabel dengan:

{{f = forecast[day.iso]; ""}}

— Zanon
sumber

Apakah ini fitur yang terdokumentasi?

— Daniel F

@DanielF, saya tidak dapat menemukan. Saya baru saja melihat komentar ini , menguji idenya, menyukainya, dan memutuskan untuk menambahkan sebagai jawaban karena memiliki visibilitas lebih dan lebih sulit untuk hilang.

— Zanon

@DanielF, baru saja menemukan jawaban dengan suara terbanyak ini yang mengusulkan solusi yang sama. Itu juga tanpa tautan dokumen.

— Zanon

@DanielF, saya telah memperbarui jawaban saya. Saya harus mengajukan pertanyaan untuk memahaminya dengan lebih baik. Ini bukan fitur khusus. Hanya perilaku ekspresi penggabungan.

— Zanon

Peretasan ini sangat berguna ketika Anda ingin ekspresi terikat ke perubahan cakupan, daripada dijalankan sekali di init.

— Ronny