CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
araj
araj

Reputation: 91

How to make a textbox which should accept only angular-typeahead list values and clear the content that is not in the typeahead list?

For Example, I have a form with a textfield which gives typeahead lists to select values. If a user enters something that is not in the typeahead list, i should clear that content that is not in typeahead list. How to achieve it ?????

Upvotes: 1

Views: 758

Answers (1)

Aliz
Aliz

Reputation: 756

If you use the typeahead from bootstrap library : http://angular-ui.github.io/bootstrap/

And underscoreJs : http://underscorejs.org/

You can resolve your problem by using the function "$watch" from $scope variable in your controller.

Which allows you to check any changement in a variable in scope, if the new value of your input does not exist in your array of values, you put an empty string in your input variable.

I made an example : http://plnkr.co/edit/cp9SLKhLYowIwFXVImAK?p=preview (it's case sensitive)

$scope.$watch('selected', function(newVal, oldVal){
    var newValPotentiallyExist= _.any($scope.states, function(state){
        return state.indexOf(newVal) != -1;
    });
    if(!newValPotentiallyExist){
       $scope.selected = '';
    }
});

Upvotes: 1

Related Questions