Pada langkah ini Anda akan belajar cara membuat filter tampilan Anda sendiri.
Harap atur ulang direktori kerja:
checkout git -f Langkah -9
Sekarang buka halaman detail seluler. Pada langkah sebelumnya, halaman detail telepon menampilkan "true" atau "false" untuk menunjukkan apakah telepon memiliki fitur tertentu. Sekarang kami menggunakan filter khusus untuk membuat grafik string teks tersebut: √ sebagai "benar"; dan × sebagai "salah". Mari kita lihat seperti apa kode filternya.
Perbedaan terpenting antara Langkah 8 dan Langkah 9 tercantum di bawah ini. Anda dapat melihat perbedaan lengkap dalam GitHub.
Filter khusus
Untuk membuat filter baru, pertama -tama buat modul PhoneCatFilters dan daftarkan filter yang disesuaikan dengan modul ini.
APP/JS/filter.js
angular.module ('phoneCatfilters', []). filter ('checkmark', function () {return function (input) {return input? '/u2713': '/u2718';};});Filter kami bernama centang. Inputnya benar atau salah, dan kami mengembalikan dua karakter Unicode ( /U2713 dan /U2718) yang mewakili benar atau salah.
Sekarang setelah filter kami sudah siap, kami perlu mendaftarkan modul phonecatfilters kami sebagai ketergantungan ke modul utama PhoneCat kami.
APP/JS/APP/JS
... Angular.Module ('PhoneCat', ['PhoneCatfilters']) ...templat
Karena kode template kami ditulis dalam file App/JS/Filter.js, kami perlu memperkenalkan file ini di templat tata letak.
app/index.html
... <skrip src = "js/controllers.js"> </script> <skrip src = "js/filters.js"> </script> ...
Sintaks untuk menggunakan filter dalam templat AngularJS adalah:
{{ekspresi | filter}}
Kami menerapkan filter ke template detail telepon:
Aplikasi/Partials/Telepon-Detail.html
... <dl> <dt> inframerah </dt> <dd> {{phone.connectivity.infrared | centang}} </dd> <dt> gps </dt> <dd> {{phone.connectivity.gps | centang}} </dd> </ll> ...tes
Filter, seperti komponen lainnya, harus diuji, dan tes ini sebenarnya mudah diselesaikan.
Uji/Unit/Filterspec.js
jelaskan ('filter', function () {sebelum kembali (modul ('phoneCatFilters')); jelaskan ('centang', function () {it ('harus mengonversi nilai boolean ke unicode checkmark atau cross', suntikan (fungsi centang) {harapkan (checkmarkfilter (true)). tobe ('/u27 hargai (centang -centang (false)). Tobe ('/u2718'); });Perhatikan bahwa sebelum melakukan tes filter apa pun, Anda perlu mengonfigurasi injektor pengujian kami untuk modul PhoneCatFilters.
Mengeksekusi ./scripts/test/sh untuk menjalankan tes, dan Anda akan melihat output berikut:
Chrome: Runner Reset ...... Total 4 Tes (Lulus: 4; Gagal: 0; Kesalahan: 0) (3.00 ms) Chrome 19.0.1084.36 Mac OS: Jalankan 4 Tes (Lulus: 4; Gagal: 0; Kesalahan 0) (3.00 ms)
Sekarang mari kita berlatih filter bawaan AngularJS dan menambahkan binding berikut ke index.html:
Kami juga dapat menggunakan kotak input untuk membuat model dan menggabungkannya dengan ikatan yang difilter. Tambahkan kode berikut ke index.html:
<input ng-model = "userInput"> Uppercased: {{UserInput | huruf besar}}
Meringkaskan
Sekarang setelah Anda tahu cara menulis dan menguji plugin khusus, di Langkah 10 kita akan belajar bagaimana terus memperkaya halaman Detail Ponsel kami dengan AngularJS.
Di atas adalah kompilasi informasi pada filter AngularJS. Kami akan terus menambahkan informasi yang relevan di masa mendatang. Terima kasih atas dukungan Anda untuk situs ini!