Saya ingin melakukan suatu kondisi dalam template AngularJS. Saya mengambil daftar video dari Youtube API. Beberapa video dalam rasio 16: 9 dan beberapa dalam rasio 4: 3.
Saya ingin membuat kondisi seperti ini:
if video.yt$aspectRatio equals widescreen then
element's attr height="270px"
else
element's attr height="360px"
Saya mengulangi video menggunakan ng-repeat
. Tidak tahu apa yang harus saya lakukan untuk kondisi ini:
- Tambahkan fungsi dalam ruang lingkup?
- Apakah itu di templat?
if-statement
angularjs
vzhen
sumber
sumber
Jawaban:
Angularjs (versi di bawah 1.1.5) tidak menyediakan
if/else
fungsionalitas. Berikut adalah beberapa opsi untuk mempertimbangkan apa yang ingin Anda capai:( Langsung ke pembaruan di bawah ini (# 5) jika Anda menggunakan versi 1.1.5 atau lebih tinggi )
1. Operator ternary:
Seperti yang disarankan oleh @Kirk dalam komentar, cara paling bersih untuk melakukan ini adalah dengan menggunakan operator ternary sebagai berikut:
2.
ng-switch
arahan:bisa digunakan seperti berikut ini.
3.
ng-hide
/ng-show
arahanAtau, Anda juga dapat menggunakan
ng-show/ng-hide
tetapi menggunakan ini sebenarnya akan membuat baik video besar dan elemen video kecil dan kemudian menyembunyikan yang memenuhing-hide
syarat dan menunjukkan yang memenuhing-show
syarat. Jadi pada setiap halaman Anda sebenarnya akan merender dua elemen yang berbeda.4. Pilihan lain untuk dipertimbangkan adalah
ng-class
arahan.Ini dapat digunakan sebagai berikut.
Di atas pada dasarnya akan menambahkan
large-video
kelas css ke elemen div jikavideo.large
benar.UPDATE: Angular 1.1.5 memperkenalkan
ngIf directive
5.
ng-if
arahan:Pada versi di atas
1.1.5
Anda dapat menggunakanng-if
arahan. Ini akan menghapus elemen jika ekspresi yang disediakan kembalifalse
dan memasukkan kembalielement
di DOM jika ekspresi kembalitrue
. Dapat digunakan sebagai berikut.sumber
ng-switch on="video"
sebaliknyang-switch-on="video"
<span>{{isAdded ? 'Added' : 'Add to cart'}}</span>
ng-if
TIDAK akan menambahkan elemen terlampir ke DOM sampai kondisinya dievaluasitrue
, tidak seperting-hide
danng-show
.ng-switch="video"
? Beberapa masalah? atau tidak tersedia sebelumnya? Bagi saya ini berfungsi dengan baikDalam versi terbaru Angular (per 1.1.5), mereka telah menyertakan arahan bersyarat yang disebut
ngIf
. Ini berbeda daringShow
danngHide
dalam elemen tidak tersembunyi, tetapi tidak termasuk dalam DOM sama sekali. Mereka sangat berguna untuk komponen yang mahal untuk dibuat tetapi tidak digunakan:sumber
ng-if
memperkenalkan lingkup yang terisolasi , sehingga$parent
menjadi$parent.$parent
di tubuhng-if
.Ternary adalah cara paling jelas untuk melakukan ini.
sumber
Angular sendiri tidak menyediakan fungsionalitas if / else, tetapi Anda bisa mendapatkannya dengan memasukkan modul ini:
https://github.com/zachsnow/ng-elif
Dengan kata-katanya sendiri, itu hanya "kumpulan arahan aliran kontrol sederhana: ng-if, ng-else-if, dan ng-else." Mudah dan intuitif untuk digunakan.
Contoh:
sumber
ng-if="someCondition && someOtherCondition"
. Mungkin saya salah paham? (Saya menulis modul itu - harus berfungsi sepertiif
danelse
di JS).Anda bisa menggunakan
video.yt$aspectRatio
properti Anda secara langsung dengan melewatkannya melalui filter, dan mengikat hasilnya ke atribut ketinggian di templat Anda.Filter Anda akan terlihat seperti:
Dan templatnya adalah:
sumber
video.yt$aspectRatio
kosong atau tidak terdefinisi? Apakah mungkin untuk menerapkan nilai default?Dalam hal ini Anda ingin "menghitung" nilai piksel tergantung pada properti objek.
Saya akan mendefinisikan fungsi dalam pengontrol yang menghitung nilai piksel.
Di controller:
Kemudian di template Anda, Anda cukup menulis:
sumber
Saya setuju bahwa ternary sangat bersih. Tampaknya itu sangat situasional meskipun karena kadang-kadang saya perlu menampilkan div atau p atau tabel, jadi dengan sebuah tabel saya tidak suka terner karena alasan yang jelas. Melakukan panggilan ke suatu fungsi biasanya ideal atau dalam kasus saya saya melakukan ini:
sumber
Anda dapat menggunakan arahan ng-if seperti di atas.
sumber
Kemungkinan untuk Angular: Saya harus menyertakan pernyataan if - di bagian html, saya harus memeriksa apakah semua variabel dari URL yang saya hasilkan didefinisikan. Saya melakukannya dengan cara berikut ini dan itu tampaknya merupakan pendekatan yang fleksibel. Saya harap ini akan bermanfaat bagi seseorang.
Bagian html di templat:
Dan bagian naskah:
Terima kasih dan salam,
Jan
sumber
Pernyataan if If else
sumber