These are chat archives for angular-ui/ui-select

Jan 2015
Kevin Dreßler
Jan 18 2015 01:38

Hi @michael-schaedel, I am fairly new to angular-ui/ui-select myself, but my first usecase of it is exactly what you seem to require.
All you need to do is apply the $filter('limitTo') built into angular to the ng-repeat of the ui-select-choices element.

Example code (jade):

ui-select(multiple, searchEnabled="true", close-on-select="false", theme="bootstrap", ng-model="sel.corpora")
ui-select-match(placeholder="Bitte auswählen...") {{$}}
ui-select-choices(repeat=" as db in dbs | filter: $ | orderBy: 'language' | limitTo: limit", group-by="'language'")
div(ng-bind-html=" | highlight: $")

A few more notes:

  • ui-select does not feature virtual scrolling by default, so if you'd like to prepopulate your model or even alter it programmatically in your controler when applying limitTo, ui-select may be unable to find the items in the filtered array corresponding to the items in your model, hence, speaking in terms of presentation, your selected items wont show up when they are not visible in the dropdown.
  • because I need prepopulation I used this hack (feels kind of dirty but does the trick for me) with:
    $scope.limit = Math.pow(2,32) - 1;
    $timeout(function () {$scope.limit = 125}, 200);
  • this does not solve the problematic of long page loads because the ui-select-choices directive still will go through its linking function for the whole list once
  • however, the dropdown lists pop-up (render) time will be dramatically reduced
  • if you do not need to change the model programatically page loads will be fast too

Also see #489, #389 and #88

Jan 18 2015 03:49
Hey @kvndrsslr, thank you for responding. It seems our use case is extremely similar. I don't have the luxury, unfortunately, to tolerate large page loads or laggy interactions. It will be a quick spike to see if this library will be beneficial or cause issues and force tons of workarounds. Thank you for your help and providing the solution you created. After my spike, if I find a better workaround, I will respond here to you. By the way, as long as you don't need Math.pow(2,32) - 1 for it's exact number, you can use Number.MAX_VALUE as it is a constant instead of multiple operations.