mtorn mtorn - 4 months ago 75
AngularJS Question

Angular-UI Bootstrap Typeahead, multiple output?

So I'm using Typeahead to fetch some info from a json file. Got that to work, no problem.
But I'd like to "autocomplete" a few other input fields when I've selected an object in the first one.

Let's say the first field looks like this:

<input type="text" class="form-control" id="supertag" ng-model="selected" uib-typeahead="title.title for title in tags | filter:$viewValue | limitTo:8"/>


It displays title.title in that input field, great!
I've tried to approach this dilemma in a few ways but I can't seem to populate the rest of the input fields when the first one is selected and ready. I'd like to have something like title.subtitle on the next one but it doesn't seem to be that straight forward.

What am I missing?
This doesn't work for example:

<input type="text" class="form-control" id="rubrik" value="{{title.subtitle}}"/>


Thanks!

Edit:
The json looks something like this:

{
title: 'title',
subtitle: 'subtitle',
id: 'id'
},
{
title: 'title',
subtitle: 'subtitle',
id: 'id'
},

Answer

You need to ad a typeahead-on-select="vm.onSelectItem($item, $model, $label) to the supertag input element, (if you are using controller as vm) or typeahead-on-select="onSelectItem($item, $model, $label) (if you are using $scope in your controller). You can name onSelectItem whatever you want, it's a function I used for illustration.

<input type="text" ng-model="subtitle" class="form-control" id="rubrik"/>

Once that is done in your view, go to your controller, define:

vm.onSelectItem = function($item, $model, $label){
  /*bind your subtitle ngModel to $item.subtitle*/
  vm.subtitle = $item.subtitle;
}

or

$scope.onSelectItem = function($item, $model, $label){
 /*bind your subtitle ngModel to $item.subtitle*/
 $scope.subtitle = $item.subtitle;
}

This should do it for you, let me know if it doesn't as I have not tried this in code.

(don't forget to mark as answer if this helps!)