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 !

score 255 · Accepted Answer · edited Sep 03 '15 at 00:41

255

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/

edited Sep 03 '15 at 00:41

answered Aug 01 '13 at 12:51

Matt

2,866
2
17
16

2

Thanks! Worked like a charm. This should probably be officially documented at the reference page under the Typeahead heading: http://angular-ui.github.io/bootstrap/ – ariestav Feb 12 '14 at 15:39
30

Does anybody have an idea what the $item $model $label objects actually are in that callback typeahead-on-select='onSelect($item, $model, $label)'? – AardVark71 Jun 25 '14 at 12:34
@Matt, is there anyway we can do postback in using $http with onSelect event? – Pratik Gaikwad Nov 22 '14 at 12:16
16

@AardVark71 $item $model $label these three properties are as below respectively. If you are binding JSON array of objects having more than one property, then you will get selected item in $item with all the properties. $model is inbuilt angular model used which will store selected item.value and $lable will give you the value displayed in the text box after selection. So in short many a time, $label will be equal to $model. Hope this clarifies your doubt. – Pratik Gaikwad Nov 22 '14 at 12:18
Thanks @Matt -- I tried to use this answer couldn't get the `onSelect` callback to work. Here is [the question](http://stackoverflow.com/questions/27365371/updating-the-model-from-a-typeahead-on-select) in case you happen to know the answer. – Josh Dec 08 '14 at 19:30
removed the earlier comments as the links were not working Can you please check these link if it helps http://www.techguides.in/how-to-create-autocomplete-using-angularjs-ui/ and http://www.techguides.in/how-to-customize-autocomplete-to-display-multiple-columns-using-angularjs-ui-2/ – Matt Jan 02 '15 at 03:50
17

@AardVark71 It is easier to explain if the expression is like: `state.id as state.name for state in states`. In that case `$item` is `state`, $model is `state.id`, and `$label` is `state.name` – Aximili Oct 11 '15 at 10:28

mchasles · Answer 2 · 2014-02-24T09:48:28.180

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);
     });
}

score 3 · Answer 3 · answered Feb 13 '16 at 17:54

Following should be your HTML

 <input id="title" type="text"  ng-model="title"  typeahead="data.enquiry_title for data in titleData | filter:$viewValue | limitTo:8" 
typeahead-on-select='onSelect($item, $model, $label)' />

just add typeahead-on-select in input tag with the callback function.

Following would go inside controller

$scope.onSelect = function ($item, $model, $label) {
            console.log($item);
            if($item.tid)
                $scope.activeTitleId = $item.tid
        };

inside $item you'll get the whole object which you have passed in the main array of suggestion list

score 0 · Answer 4 · answered Jun 21 '15 at 14:38

0

try the following before validation

 modelCtrl.$setValidity('editable', true);

answered Jun 21 '15 at 14:38

Mohamed.Abdo

2,054
1
19
12

angular ui-bootstrap typeahead callback on selectMatch?

4 Answers4

Linked