javascript angularjs angular-ui angular-ui-select

Manually entering text in angular-ui

My question comes from the selected answer here

<ui-select-choices repeat="hero in getSuperheroes($select.search) | filter: $select.search">
<div ng-bind="hero"></div>

works perfectly fine with:

$scope.getSuperheroes = function(search) {
  var newSupes = $scope.superheroes.slice();
  if (search && newSupes.indexOf(search) === -1) {
    newSupes.unshift(search);
  }
  return newSupes;
}

However, when I put a breakpoint on $scope.superheroes I see its called as many times as my data. Data is very large. Its fetched from a $http.get() request and I'm handling not loading the data in the textbox all at once.

However, I don't want to call this until I actually start typing anything in the textbox. I tried to call getSuperheroes using

on-select="getSuperheroes($select.search)"

and similarly

refresh="getSuperheroes($select.search)"

but they do not help allowing manual entry of data.

What do I use to call the function and yet get the task done just like how it works in the referenced answer?

Solution

I recommend you to do this:

In order to improve performance get rid of repeat="hero in getSuperheroes($select.search) | filter: $select.search", since if your data doesn't change the function getSuperheroes will be triggered (anyway) every time a $digest is executed (no matter the var newSupes changes or not in getSuperheroes) (that's wahat's happening right now!). Instead put (for instance) repeat="hero in myHeroes" and then in your getSuperheroes func do this:

$scope.getSuperheroes = function(search) {
    var aux = $scope.superheroes.slice();
    if (search && aux.indexOf(search) === -1) {
        aux.unshift(search);
    }
    $scope.myHeroes = aux;
}

Keep the refresh="getSuperheroes($select.search)", this will search the new values by calling getSuperheroes which will update the $scope.myHeroes var and then it will be refreshed in the view.
Add the property refresh-delay="500" (500 is just an example, put whatever fits your needs). This will delay the search that amount of milisecond. This is useful when you do not want start searching immediately. For instance if the user wants to search "Superman" and she/he type "Sup" in less than 500 milisec the search will start with the string "Sup". If you do not set that property the search would be executed 3 times (one for "S" another for "Su" and a third one for "Sup")

PS:

-- If you want to get the ui-select with some values initially, You must call the getSuperheroes func on your controller start.

-- You may need to declare $scope.myHeroes = []; at the beginning of your controller (it depends on your controller implementation).

-- You might want to read more info about $digest on the AngularJS official doc, on SO there are some related posts: