Pembahasan sebelumnya saya sudah membahas tentang Cara Menampilkan Todolist Dengan Menggunakan AngularJs. Dan sekarang saya akan membahas tentang Cara Membuat Pencarian Data Todolist Dengan Menggunakan AngularJs, untuk filenya yang digunakan masih sama dengan file pembahasan kemarin. Hanya saja disini ada perubahan data todolistnya dan tag input tambahan untuk melakukan pencarian data todolist dengan menggunakan filter yang ada pada angularJs.

Cara Membuat Pencarian Data Todolist Dengan Menggunakan AngularJs teman-teman ubah data todolistnya terlebih dahulu di bagian div yang ada direktif ng-init seperti pada script berikut ini.

Dan jika teman-teman sudah selesai, selanjutnya buat tambahan tag input seperti pada script di bawah ini.

Jika sudah maka kita akan memberikan fungsi filter pada direktif ng-repeat yang berada di dalam tag li. Dan berikut ini adalah scriptnya.

Saya akan menjelaskan script di atas ya teman-teman. Untuk cetak data atau outputnya karena data dari direktif ng-init saya ubah dengan menambahkan key dan lebih dari 2 key maka mencetaknnya seperti penjelasan di bawah ini.

{{nama variable di ng-repeat.nama key di ng-init}}

Dan disambung dengan tanda | untuk menambahkan fungsi lain pada direktif ng-repeat. Dan untuk membuat pencarian data di sini kita bisa menggunakan fungsi filter pada angularJs seperti script di atas dengan keyword yang di ambil dari nama direktif ng-model yang ada di tag input. Filter disini kita bisa mencari semua data yang mengandung keyword yang kita ketik, baik dari key nama atau key jurusan.

Hasilnya akan seperti pada gambar di bawah ini.

Cara Membuat Pencarian Data Todolist Dengan Menggunakan AngularJs

Cara Membuat Pencarian Data Todolist Dengan Menggunakan AngularJs

Demikian artikel tentang Cara Membuat Pencarian Data Todolist Dengan Menggunakan AngularJs. Simple dan mudah di pahami bukan? Untuk pembahasan selanjutnay akan semakin menarik lagi tentang materi angularJs. Karena di pembahasan selanjutnya saya akan melanjutkan pembahasannya dengan membuat controller dengan menggunakan angularJs.

Semoga artikel ini dapat bermanfaat buta teman-teman dan selamat mencoba.