angular ui-bootstrap typeahead callback on selectMatch?

Question

I'm using the angular ui-bootstrap typeahead and I would want to use it as a way to pick up many choices, so I'd need to get the selected value when selectMatch method is launched but I can't find how to do that in my controller

<div class='container-fluid' ng-controller="TypeaheadCtrl"> <pre>Model: {{selected| json}}</pre> <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue"> 

If I watch the selected value, I got the change every time a key is pressed...

scope.$watch('selected', function(newValue, oldValue) {... }); 

I got that the method selectMatch is the one which is called when the user press enter or click on the list but I don't know how to have a callback on that...

Thanks !

Answer 1

There is better way of doing this now. A new callback method has been added

In controller file add the following:

 $scope.onSelect = function ($item, $model, $label) {     $scope.$item = $item;     $scope.$model = $model;     $scope.$label = $label; }; 

In view add the following:

 <input type="text"         ng-model="selected"         typeahead="state for state in states | filter:$viewValue"         typeahead-editable="false"         typeahead-on-select="onSelect($item, $model, $label)"/> 

See the typeahead spec for more information (search for onSelect).

Check out if the following URLs helps http://www.techguides.in/how-to-create-autocomplete-using-angularjs-ui/

http://www.techguides.in/how-to-customize-autocomplete-to-display-multiple-columns-using-angularjs-ui-2/

Answer 2

Edit: this method is not the best one now. It's better to use onSelect callback like explained in the answer above this one.

I found how how do to do what I wanted. I did see that there is a typeahead-editable attribute and if it's set to false then the selected value change only when a value from the model is selected. And so the $watch is working fine to check when a new value is selected.

<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue" typeahead-editable="false">  link: function(scope, elm, attrs){     scope.$watch('selected', function(newValue, oldValue) {         if (newValue)           console.log(oldValue+"->"+newValue);      }); }