Saya telah belajar tentang penggunaan AngularJS sebelumnya, jadi saya hanya akan menulis program kecil untuk mengimplementasikan fungsi penyaringan dan penyortiran kueri.
Anda dapat belajar dari program ini:
1 filter AngularJS
2 Cara menggunakan NG-repeat
3. Penggunaan pengontrol
4 Ikatan Data
Analisis Pemrograman
Pertama, jika Anda ingin meminta filter terlebih dahulu, Anda perlu menggunakan filter filter di AngularJS.
Gunakan karakter perintah pipa | langsung setelah ekspresi, dan ikuti metode penulisan berikut untuk mencapai efek penyaringan:
{{orang | Filter: kueri}}
Dengan menggunakan filter untuk mengimplementasikan pemfilteran, kueri adalah string yang dimasukkan saat memfilter pemfilteran.
Demikian pula, fungsi penyortiran dapat dicapai dengan menggunakan orderby:
{{orang | Filter: Kueri | orderby: order}}
Kueri dan sortir di atas melibatkan dua variabel, kueri, dan ketertiban. Di sini Anda dapat secara langsung menggunakan NG-model untuk mengimplementasikan pengikatan data:
Pencarian: <input ng-model = "kueri"> sortir dengan: <pilih ng-model = "order"> <option value = "name"> name </pection> <option value = "usia"> usia </tiption> </pilih>
AngularJS adalah bahasa kerangka kerja berbasis DOM, jadi tidak perlu mengimplementasikan pendengar dan pemicu acara. Ketika ada perubahan dalam kotak input di mana kueri berada, kotak input dan ekspresi berikut akan dipicu untuk menyegarkan kotak input dan ekspresi berikut!
Dibandingkan dengan beberapa kerangka kerja lainnya, ini ditambahkan ke DOM melalui node DOM InnerHTML berdasarkan string. Implementasi AngularJS mempercepat tampilan model dan tampilan. Ini juga mengurangi penulisan kode seperti pendengar dan pemicu yang tidak perlu, dan benar-benar mencapai efek seperti musim semi ~
Presentasi data dapat dicapai melalui NG-repeat. Ketika halaman web diuraikan ke NG-repeat, tag akan dikloning untuk setiap elemen dalam array untuk kompilasi dan penguraian.
<ul> <li ng-repeat = "orang dalam orang | filter: query | orderby: order"> {{person.name}} {{person.age}} </li> </ul>Sisa pekerjaannya adalah menginisialisasi array peron dalam skrip:
<Div ng-controller = "ctl"> ... </div> <script type = "text/javascript"> function ctl ($ scope) {$ scope.persons = [{"name": "xingoo", "usia": 25}, {"name": "zhangsan", "usia": 18}, {"name": "zhangsan", "usia": 18}, {"name": "zhangsan", "18}," zaman "," zaman "," zaman "," zaman "," zaman "," {"name": "wangwu", "usia": 30}]; $ scope.order = "usia"; } </script>Kode dan hasil
Akhirnya, semua kode diposting:
<! Doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script src = "http://apps.bdimg.com/libs/angular.js/1.16//apps.bdimg.com/libs/angular.js/1.16. <Div ng-controller = "ctl"> pencarian: <input ng-model = "kueri"> sortir dengan: <pilih ng-model = "order"> <option value = "name"> name </pection> <option value = "evene" eve </option> </schect> <ul> <li ng-reveat = "personam"} {every: {query {{ever- {ever- { {{person.age}} </li> </ul> </div> <script type = "text/javascript"> function ctl ($ scope) {$ scope.persons = [{"name": "xingoo", "usia": 25}, {"nama": "zhangsan", "usia": 18}, {{"ze": "zaman": " {"name": "wangwu", "usia": 30}]; $ scope.order = "usia"; } </script> </body> </html>Gunakan Hasil:
Secara default, gunakan usia untuk mengurutkan:
Dengan memilih, Anda dapat menggunakan jenis nama
Saat memasuki karakter, beberapa opsi akan difilter secara otomatis melalui kueri.
Di atas adalah penyortiran informasi untuk penyaringan dan penyortiran AngularJS. Kami akan terus menambahkan informasi yang relevan di masa mendatang. Terima kasih atas dukungan Anda untuk situs web ini!