Pada langkah ini Anda akan menambahkan fitur yang memungkinkan pengguna untuk mengontrol pesanan di mana daftar telepon ditampilkan. Penyortiran dinamis dapat diimplementasikan dengan cara ini, menambahkan properti model baru, mengintegrasikannya dengan iterator, dan kemudian memungkinkan pengikatan data untuk melakukan sisanya.
Harap atur ulang direktori kerja:
checkout git -f Langkah -4
Anda harus menemukan bahwa selain kotak pencarian, aplikasi Anda memiliki menu bawah tambahan yang memungkinkan mengendalikan urutan pengaturan telepon.
Perbedaan terpenting antara Langkah 3 dan Langkah 4 tercantum di bawah ini. Anda dapat melihat perbedaan lengkap dalam GitHub.
templat
app/index.html
Pencarian: <input ng-model = "kueri"> urutkan dengan: <pilih ng-model = "orderprop"> <opsi value = "name"> alfabet </pection> <option value = "usia"> terbaru </tiption> </pilih> <ul> <li ng-repeat = "telepon di ponsel | filter: query | orderby: ordoProp"> {phone di ponsel | filter: query | orderby: ordoProp "> {phone di ponsel | filter: query | orderby: ordoPPeP"> {phone di ponsel | filter: query | orderby: ordoProp "> {phone {{{{{{{phones {phones {phones {phones {phones {li {li {phones | <p> {{phone.snippet}} </p> </li> </ul>Kami membuat perubahan berikut dalam index.html:
Pertama, kami menambahkan tag <CILECT> yang disebut OrderProp sehingga pengguna kami dapat memilih dua metode penyortiran yang kami berikan.
Kemudian, tambahkan filter orderby setelah filter filter untuk memproses data yang masuk ke iterator. Filter OrderBy mengambil array sebagai input, menyalin salinan, dan merekrut ulang salinan dan mengeluarkannya ke iterator.
AngularJS menciptakan ikatan dua arah antara elemen pilih dan model OrderProp. Kemudian, OrderProp akan digunakan sebagai input ke filter orderby.
Seperti yang kami katakan ketika kami membahas pengikatan data dan iterator pada langkah 3, tidak peduli kapan model data berubah (seperti pengguna memilih urutan yang berbeda di menu drop-down), pengikatan data AngularJS akan secara otomatis memperbarui tampilan. Tidak ada operasi dom yang canggung!
Pengontrol
App/JS/Controllers.js:
function PhoneListCtrl($scope) { $scope.phones = [ {"name": "Nexus S", "snippet": "Fast just got faster with Nexus S.", "age": 0}, {"name": "Motorola XOOM™ with Wi-Fi", "snippet": "The Next, Next Generation tablet.", "age": 1}, {"name": "Motorola Xoom ™", "Snippet": "Tablet Generasi Berikutnya.", "Age": 2}]; $ scope.orderprop = 'usia';}Kami memodifikasi model ponsel - array ponsel - menambahkan atribut usia untuk setiap catatan ponsel. Kami akan mengurutkan ponsel sesuai dengan atribut usia.
Kami menambahkan baris ke kode pengontrol untuk membuat nilai default dari ordeProp menjadi usia. Jika kami tidak mengatur nilai default, model ini akan tetap tidak diinisialisasi sampai pengguna kami memilih pesanan di menu tarik-turun.
Sekarang kita harus berbicara tentang ikatan data dua arah. Perhatikan bahwa ketika aplikasi dimuat di browser, "terbaru" dipilih di menu tarik-turun. Ini karena kami mengatur pesanan ke 'usia' di pengontrol. Jadi mengikat berfungsi dalam arah dari model kami ke antarmuka pengguna - yaitu, pengikatan data dari model ke tampilan. Sekarang ketika Anda memilih "abjad" di menu tarik-turun, model data akan diperbarui pada saat yang sama dan array daftar telepon akan dipesan ulang. Pada saat ini, pengikatan data mulai berlaku dari arah lain - yaitu, pengikatan data dari tampilan ke model.
tes
Perubahan yang kami lakukan dapat diverifikasi dengan tes unit atau tes ujung ke ujung. Mari kita lihat tes unit pertama:
Tes/Unit/Controllersspec.js:
jelaskan ('pengontrol phonecat', function () {gambarkan ('phoneListCtrl', function () {var scope, ctrl; sebelum kembali (function () {scope = {}, ctrl = phonelistctrl (scope) {{{{'); });Tes unit sekarang memverifikasi bahwa nilai default diatur dengan benar.
Kami menggunakan antarmuka Jasmine untuk mengekstrak pengontrol phoneListCtrl ke dalam blok sebelum kembali, yang akan dibagikan oleh semua tes di semua blok induk yang dijelaskan.
Jalankan tes unit ini, seperti sebelumnya, jalankan skrip ./scripts/test.sh, dan Anda akan melihat output berikut (Catatan: Anda perlu membuka http: // localhost: 9876 di browser Anda dan masukkan mode ketat sebelum tes akan berjalan!):
Chrome: Runner Reset ... Total 2 Tes (Lulus: 2; Gagal: 0; Kesalahan: 0) (3.00 ms) Chrome 19.0.1084.36 Mac OS: Jalankan 2 Tes (Lulus: 2; Gagal: 0; Kesalahan 0) (3.00 ms)
Sekarang kami mengalihkan perhatian kami pada pengujian ujung ke ujung.
test/e2e/skenario.js:
... itu ('harus dimungkinkan untuk mengontrol pesanan telepon melalui kotak drop-down terpilih', function () {// Mari kita mempersempit dataset untuk membuat pernyataan uji input yang lebih pendek ('kueri'). Enter ('tablet'); harapkan (repeater ('. "" Motoroon "WHIE2 dengan motor (" motor u). Xoom/u2122 "]); select ('orderprop'). Opsi ('alfabet'); harapkan (repeater ('. Telepon li', 'Daftar telepon'). Kolom ('Telepon.Name')). Toequal ([" Motorola Xoom/U2122 "," Motorola Xoom/U2122 dengan Wi-FI ");Pengujian ujung ke ujung memverifikasi bahwa mekanisme penyortiran kotak opsi sudah benar.
Anda sekarang dapat menyegarkan browser Anda dan menjalankan tes ujung ke ujung lagi, atau Anda dapat menjalankannya di server AngularJS.
praktik
Di pengontrol phoneListCtrl, hapus pengaturan pernyataan pesanan, dan Anda akan melihat bahwa AngularJS akan sementara menambahkan opsi kosong di menu drop-down, dan urutan penyortiran adalah sortir default (mis. Tidak disortir).
Tambahkan `{{ordProp}} yang mengikat ke templat index.html untuk menampilkan nilainya secara real time.
Meringkaskan
Sekarang Anda telah memberikan fungsionalitas pencarian untuk aplikasi Anda dan mengujinya secara penuh. Langkah 5 Kita akan belajar tentang layanan AngularJS dan bagaimana AngularJS menggunakan injeksi ketergantungan.
Di atas adalah kompilasi informasi untuk pengikatan dua arah AngularJS. Kami akan terus menambahkan informasi yang relevan di masa mendatang. Terima kasih atas dukungan Anda untuk situs web ini!