Proposal to add a limiter to <luyaSelect>

[Antikon]

Currently any <luyaSelect> directive on the page generates an n <option> tags, where n is the number of options.

If you have a few hundred of <luyaSelect>s with 100-300 options, the performance of page becomes near zero.

The real world example is the following. You have 100 double rooms in the hotel and 200 people, and you need to resettle each. There is a page with all available places, each of which is <luyaSelect> with a list of all people.

I propose to add a limiter to <luyaSelect>.

<option ng-repeat="opt in options | limitTo: limiter"... 

and

<div class="zaaselect-item" ng-repeat="opt in options | filter:searchQuery | limitTo: limiter">'

When luyaSelect is closed limiter is zero. When user clicks on select limiter becomes undefined (no limits).

Of course, this will lead to useless actions, in the case when there is only one <luyaSelect> on the page. If you don’t like it, we can make a separate directive, for example <lazyLuyaSelect>.

[nadar]

so you want to use limit to just either display the data or not? Its not to limit the rows you are concerned about the amount of dom inception which will therefore require performance in the browser? we better then use ng-if=isOpen which will hide the select until the arrow down button is clicked.

[Antikon]

You are right. ngIf is what I need in this case.
Are we modifying <luyaSelect> or creating a new directive? (I vote for the first option).

[nadar]

sure we can update the existing model and use ng-if, we just have to ensure it works with the child scope creation.

angular/angular.js#4046