AngularJS-在表中使用指令-ng-repeat影响性能

Question

I am using a directive to display a drop-down with 9-10 options in each row of a table. This table may have upto 200 rows. My concern is, that directive is getting called 200 times for each row. is there any way which can create drop-down just once and simply insert in each row and bind it with the scope so if there is any event on drop-down then that also work fine

Answer 1

If it were me, I wouldn't worry about it unless you're seeing noticeable issues with performance. Most browsers should be able to handle a 200 row table with directives in every row without any problem.

However, if you're concerned about it or if you're seeing issues, you have a couple of options.

1) Instead of a dropdown menu in each row, just put an "edit" button and use that to open a modal where the user selects what they want

2) Use an editable table plugin like ui-grid (double click the example table's data to edit). It has been tested with thousands of rows and it performs well. In the example you'll see a dropdown menu where the user can select Male or Female - that could be configured to have the options you need.