CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangular-ui-bootstraptypeahead.js
Body
Body

Reputation: 3688

UI Bootstrap Typeahead ignore selected value

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.

Upvotes: 0

Views: 1135

Answers (1)

Daniel
Daniel

Reputation: 6481

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

Upvotes: 1

Related Questions