Apa cara terbaik untuk kondisional menerapkan kelas?
Katakanlah anda memiliki sebuah array yang dituliskan di ul
dengan li
untuk masing-masing elemen dan properti pada controller yang disebut selectedIndex
. Apa yang akan menjadi cara terbaik untuk menambahkan class untuk li
dengan index selectedIndex
di AngularJS?
Saat ini saya duplikasi (dengan tangan) yang li
kode dan menambahkan kelas ke salah satu li
kategori dan menggunakan ng-show
dan ng-menyembunyikan
untuk menunjukkan hanya satu li
per indeks.
1170
22
Jika anda don't ingin menempatkan nama kelas CSS ke Controller seperti yang saya lakukan, berikut ini adalah trik lama yang saya gunakan sejak pra-v1 hari. Kita dapat menulis sebuah ekspresi yang mengevaluasi langsung ke nama kelas dipilih, tidak ada custom arahan yang diperlukan:
Mohon perhatikan sintaks tua dengan usus besar.
Ada juga cara yang lebih baik baru menerapkan kelas kondisional, seperti:
Sudut sekarang mendukung ekspresi yang mengembalikan sebuah objek. Masing-masing properti (nama) objek ini sekarang dianggap sebagai nama kelas dan diterapkan tergantung pada nilainya.
Namun cara ini tidak secara fungsional sama. Berikut ini sebuah contoh:
Oleh karena itu kita dapat menggunakan kembali CSS yang sudah ada kelas pada dasarnya pemetaan model properti untuk nama kelas dan pada saat yang sama menjaga kelas CSS yang keluar dari Controller code.
ng-kelas mendukung ekspresi yang harus mengevaluasi dengan baik
Jadi, dengan menggunakan formulir 3) kita hanya bisa menulis
Lihat juga https://stackoverflow.com/questions/13813254/how-do-i-conditionally-apply-css-styles-in-angularjs untuk jawaban yang lebih luas.
Update: Sudut 1.1.5 telah menambahkan dukungan untuk ternary operator, jadi jika membangun yang lebih akrab untuk anda:
Metode favorit saya adalah menggunakan ternary ekspresi.
Catatan: Memetikan anda'kembali menggunakan versi lama dari Sudut anda harus menggunakan ini sebagai gantinya,
I'll tambahkan ke ini, karena beberapa dari jawaban-jawaban ini tampak keluar dari tanggal. Berikut ini's bagaimana saya melakukannya:
Mana 'isSelected' adalah variabel javascript yang ditetapkan dalam cakupan sudut controller.
Untuk lebih khusus menjawab pertanyaan anda, berikut ini's bagaimana anda bisa menghasilkan sebuah daftar dengan:
HTML
JS
Lihat: http://jsfiddle.net/tTfWM/
Lihat: http://docs.angularjs.org/api/ng.directive:ngClass
Berikut ini adalah solusi yang jauh lebih sederhana:
Saya menghadapi masalah yang sama baru-baru ini dan memutuskan untuk hanya membuat filter bersyarat:
Dibutuhkan satu argumen yang lebih baik 2-elemen array atau string, yang akan berubah menjadi sebuah array yang ditambahkan string kosong sebagai elemen kedua:
Jika anda ingin melampaui biner evaluasi dan menjaga CSS anda keluar dari controller anda dapat menerapkan filter sederhana yang mengevaluasi masukan terhadap objek peta:
Hal ini memungkinkan anda untuk menulis markup anda seperti ini:
Itu baru saja saya lakukan itu melakukan hal ini:
The
isShowing
value adalah nilai yang terletak pada controller yang akan diaktifkan dengan klik tombol dan bagian antara satu tanda kurung adalah kelas yang saya buat di file css.EDIT: saya juga ingin menambahkan bahwa codeschool.com memiliki kursus gratis yang disponsori oleh google pada AngularJS yang berjalan di atas semua hal-hal ini dan kemudian beberapa. Tidak perlu membayar untuk apa-apa, hanya mendaftar untuk sebuah account dan pergi! Best of luck untuk anda semua!
Operator Ternary telah ditambahkan ke sudut parser di 1.1.5.
Jadi cara paling sederhana untuk melakukan hal ini sekarang :
Kita bisa membuat fungsi untuk mengelola kembali kelas dengan kondisi
Dan kemudian
Anda dapat merujuk ke kode penuh halaman di ng-kelas jika misalnya
Saya baru ke Sudut tetapi telah menemukan ini untuk memecahkan masalah saya:
Ini akan kondisional menerapkan kelas berbasis pada var. Ini dimulai dengan icon-download sebagai default, menggunakan ng-kelas, saya memeriksa status
showDetails
jikatrue/false
dan menerapkan kelas ikon-upload. Kerja besar.Semoga membantu.
Ini bekerja seperti pesona ;)
Ini mungkin akan mendapatkan downvoted untuk dilupakan, tapi di sini adalah bagaimana saya digunakan 1.1.5's ternary operator untuk beralih kelas tergantung pada apakah sebuah baris dalam tabel adalah yang pertama, di tengah atau di akhir -- kecuali jika hanya ada satu baris dalam tabel:
Ini adalah pekerjaan saya beberapa persyaratan hakim:
parsial
controller
nah saya akan menyarankan anda untuk memeriksa kondisi di controller dengan fungsi kembali sejati atau palsu .
dan di controller memeriksa kondisi
Berikut adalah pilihan lain yang bekerja dengan baik ketika ng-kelas dapat't yang akan digunakan (misalnya ketika styling SVG):
(Saya pikir anda harus paling tidak stabil Sudut untuk menggunakan ng-ora-, I'm saat ini di 1.1.4)
Hanya menambahkan sesuatu yang bekerja untuk saya hari ini, setelah banyak mencari...
Semoga ini bisa membantu anda sukses pembangunan.
=)
Berdokumen Ekspresi Sintaks : Website Link... =)
Cek http://www.codinginsight.com/angularjs-if-else-statement/
Terkenal angularjs jika pernyataan lain!!! Ketika saya mulai menggunakan Angularjs, saya sedikit terkejut bahwa saya tidak bisa menemukan jika pernyataan/lain.
Jadi saya bekerja pada sebuah proyek dan saya melihat bahwa ketika menggunakan if/else pernyataan, kondisi tersebut menunjukkan saat loading. Anda dapat menggunakan ng-jubah untuk memperbaiki hal ini.
.ng-jubah { display: none }
Terima kasih amadou
Jika anda memiliki sebuah kelas umum yang diterapkan untuk banyak elemen yang anda dapat membuat kustom, petunjuk yang akan menambah kelas yang suka ng-show/ng-sembunyi.
Direktif ini akan menambah kelas 'aktif' untuk tombol jika itu's diklik
info Lebih lanjut