UI Bootstrap Typeahead ignore selected value

Question

I'm using Ui-Bootstrap's Typeahead. I have two Typeahead fields (Origin and Destination Airport) and both takes the same data source. I want to avoid the Origin selected value in Destination listing. How can I do that?

Origin

<input type="text" ng-model="orig" typeahead="s in data | filter:$viewValue" class="form-control input-lg">

Destination

<input type="text" ng-model="dest" typeahead="s in data | filter:$viewValue" class="form-control input-lg">

I found in Google to do something like

ng-if="person.name_key!='FirstPerson'"

in the ng-repeat element but here I have no access for ng-repeat in the HTML.

Please help.

Answer 1

You can use typeahead-on-select($item) to execute a callback that will remove the selected item from the data array like this:

    <input type="text" ng-model="orig" typeahead="s for s in data | filter:$viewValue" 
           class="form-control input-lg" typeahead-on-select="onSelect($item)">

And as for the onSelect function -

  $scope.onSelect = function(item){
    $scope.data.push($scope.previouslySelected); // push back the previously selected
    $scope.previouslySelected = item; // save the currently selected
    var index = $scope.data.indexOf(item);
    $scope.data.splice(index, 1);
  };

Here's a working plunker