javascriptangularjsinfinite-scrollui-select

How to apply both filter:$select.search and limitTo:$select.infiniteCurrentLimit on the same ui-select field?

I have ui-select field that is using infinite-scroll features because it may have a huge amount of options, but then since there are a lot it's tiring to scroll down to find the desired option.

<ui-select-choices 
    infinite-scroll="$select.infiniteStepIncrement()"
    infinite-scroll-distance="2"
    infinite-step="2"
    current-limit="10"
    all-options="app.bigList"
    repeat="option.id as option in app.bigList | limitTo: $select.infiniteCurrentLimit">
    <span ng-bind-html="option.value"></span>
</ui-select-choices>

So I decided to implement filter: $select:search on it. It filters the options but it cancels the scrollable features.

<ui-select-choices 
    infinite-scroll="$select.infiniteStepIncrement()"
    infinite-scroll-distance="2"
    infinite-step="2"
    current-limit="10"
    all-options="app.bigList"
    repeat="option.id as option in app.bigList | filter: $select.search | limitTo: $select.infiniteCurrentLimit">
    <span ng-bind-html="option.value"></span>
</ui-select-choices>

Is there anything I can do for them to be able to work together?

Solution

  • Found the solution after lots of googling and trial and errors. I just grouped the app.bigList and filter so that it would return as an already filtered list for the limitTo to work on. Kind of works like PEMDAS.

    repeat="option.id as option in (app.bigList | filter: { value: $select.search }) | limitTo: $select.infiniteCurrentLimit">