Angular ng-repeat dan reuse variable

Pada kesempatan kali ini saya akan membahas mengalami pengalaman saya dalam menggunakan ng-repeat dan reuse variable. ng-repeat merupakan salah satu fungsi dari angular yang berfungsi seperti for pada html. Untuk penggunaanya dapat dilihat pada blog sebelumnya : Pengenalan Angular part 1 .

Pada kesempatan yang lalu kami membuat sebuah web dengan form yang membutuhkan banyak kegiatan search. Data search itu sendiri didapat menggunakan web service.

Untuk mempercantik tampilannya maka kami memutuskan untuk menggunakan modal sebagai tempat menampilkan hasil search tersebut. Sehingga dari situ kami memiliki hampir 20 modal yang berfungsi menampilkan hasil search tersebut. 

Modal- modal tersebut akan muncul sesuai dengan hasil searchnya dan mengembalikan data yang dipilih ke masing" method di controller. Dikarenakan perbedaan method yang harus di panggil untuk mengeset data, sehingga saya harus membuat modal yang berbeda-beda walaupun data search memiliki structure yang mirip.

 Dikarenakan modal yang banyak tetapi data yang di akan di repeat pada modal memiliki structure yang sama, saya memutuskan menampung hasil search menggunakan 1 variable temporary yang sama dengan tujuan mengemat variable dan mereuse yang sudah ada.

Hasilnya dapat sesuai kenginan, tetapi waktu yang dibutuhkan sangat lama untuk hasil search yang memiliki data dalam jumlah banyak bahkan cukup sering mengakibatkan browser freeze dan crash.

Ternyata penggunaan 1 variable untuk beberapa modal membuat modal- modal lain yang masih invisible juga melakukan proces rendering data. hal tersebut terjadi karena 2-ways data binding yang merupakan concept dasar angular. Perubahan data yang terjadi pada controller menyebabkan modal yang ada pada html melakukan rendering data. Hal itu menyebabkan belasan modal yang ada melakukan rendering pada waktu yang sama.

Dikarenakan modal invisible smua pada waktu yang sama membuat saya miss dalam menyadari bahwa angular melakukan rendering pada sekian banyak ng-repeat yang ada pada 1 html.

Dari pengalaman tersebut dapat di ingat bahwa penggunaan reuse variable pada angular perlu lebih di perhatikan dikarenakan 2 ways data binding angular akan membuat angular melakukan rendering pada bagian yang mungkin masih belum di perlukan.


Sekian dulu pada kesempatan kali ini. Semoga pengalaman ini dapat berguna untuk yang mengalami hal serupa :D