Angular-UI typeahead: show label, but bind only to value

Question

I am using Angular-UI typeahead as follows:

<input type="text" ng-model="myModel" typeahead="o.value as o.text for o in options | filter:$viewValue | limitTo:5" typeahead-editable="false" /> 

tied to a model like:

 var options = [ {"value": 1, "text": "value1"}, {"value": 2, "text": "value2"}, ... ]; 

It correctly displays the text of the parameters, but when I select an element, it shows the value inside the text field. The model is correctly limited only by the value (and not by the entire model object).

Is it possible to display “text” (rather than “value”) inside the text box after the selection, while retaining the model’s binding only to the value (ie when I select a specific “text”, the model is updated using “value”)?

Answer 1

This is not ideal, but the typeahead-input-formatter attribute provides a workaround until a fix is ​​provided. ( Plunker from github thread).

HTML:

 <input type="text" ng-model="myModel" typeahead="o.value as o.text for o in options | filter:$viewValue | limitTo:5" typeahead-editable="false" typeahead-input-formatter="formatLabel($model)" /> 

AngularJs controller function:

 $scope.formatLabel = function(model) { for (var i=0; i< $scope.options.length; i++) { if (model === $scope.options[i].value) { return $scope.options[i].text; } } }; 

Answer 2

Try changing your code from

 typeahead="o.value as o.text for o in options | filter:$viewValue | limitTo:5" 

to

 typeahead="o as o.text for o in options | filter:$viewValue | limitTo:5" 

Answer 3

You can try to do as suggested, but with typeahead-on-select, for example,

 <input type="text" ng-model="myModel" typeahead="o as o.text for o in options | filter:$viewValue | limitTo:5" typeahead-editable="false" typeahead-on-select="model=$item.value" /> 

This will display the text or label, but the base value will be changed.

Answer 4

Here's a shorthand formatting for anyone using lodash or underscore:

 function formatTypehead(array,id){ var o = _.find(array,{id:id}); return (o?o.displayName || id:id); } 

and html:

 <input type="text" uib-typeahead="s.id as s.displayName for s in companies | filter:$viewValue | limitTo:8" typeahead-input-formatter="formatTypehead(companies, $model)" ng-model="model.company" > 

Answer 5

Ok, so far I have found a possible solution through directives.

HTML

 <div my-autocomplete my-autocomplete-source="element" my-autocomplete-model="obj[element.model]"></div> 

DIRECTIVE

 app.directive('myAutocomplete', function() { return { restrict: 'A', replace: true, template: '<input type="text" name="{{myAutocompleteSource.model}}" placeholder="{{myAutocompleteSource.label}}" ng-model="selected" typeahead="o as o.text for o in myAutocompleteSource.options | filter:$viewValue | limitTo:5" typeahead-editable="false" />', scope: { myAutocompleteSource: '=', myAutocompleteModel: '=' }, controller: function($scope) { $scope.selected = null; $scope.$watch('selected', function() { $scope.myAutocompleteModel = ($scope.selected && 'value' in $scope.selected) ? $scope.selected.value : null; }); } }; }); 

Well ... obviously this is just a trick ... I would like to know if there is a cleaner, more natural way to do this ... without changing the code or using the directive ...

Answer 6

for me it:

 uib-typeahead="o as o.RagioneSociale for o in main.getLocation($viewValue)" 

instead:

 typeahead="o as o.RagioneSociale for o in main.getLocation($viewValue)" 

was really helpful

I had json done like this:

 [{"RagioneSociale":"Politi Real Estate sas","IDAnagrafica":"2516"},{"RagioneSociale":"COND METROPOLITAN","IDAnagrafica":"4325"}] Model: {{asyncSelected | json}} <input type="text" ng-model="asyncSelected" uib-typeahead="o as o.RagioneSociale for o in main.getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control"> 

and it ended up having a popup menu with only the RagioneSociale value and a model in which I can see both the text and the identifier and print them using the usual {{asyncSelected}}