Angular-UI Bootstrap Typeahead, multiple output?

Question

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'
},

Edit: Further code for comparison between different json files.

So this is what the input field points to:

$http.get(tagUrl)
        .then(function(res) {
            $scope.tags = res.data;
        })

And onSelect:

$scope.onSelect = function($item, $model, $label) {
        $scope.id = $item.id;
        $scope.title = $item.title;
        $scope.selected = $item.selected;
        $scope.subtitle = $item.subtitle; <- undefined because it only exists in JSON2, not in JSON1.
        console.log($scope.id);
    };

Here is where I'd like the function to do a comparison on the inputs id. It will always exist at JSON1 (tagUrl) but I also want it to look if it exists in JSON2 (superUrl) before going further (and also, if it exists, set $scope.subtitle = $item.subtitle to corresponding input field). I tried different approaches with if statements but at its best, I get undefined.

I have this for a ng-repeat which lists all of the superUrls on the page which might be useful to get what I want.

$http.get(listSuperUrl)
        .then(function(res) {
            $scope.current = res.data;
        })

to check if superUrl exists, you need to use the truthy. Basically, you can do something like if(superUrl) this will tell you if it exists. — Leibniz
– Leibniz, Commented Jul 28, 2016 at 15:33

Pang · Accepted Answer · 2018-10-23 02:48:50Z

2

You need to add 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.

edited Oct 23, 2018 at 2:48

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Jun 28, 2016 at 14:33

Leibniz

3043 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mtorn Over a year ago

Wow, thanks! With minor modifications to your code it worked!

Leibniz Over a year ago

@mtom, nice to hear that it helped :)

mtorn Over a year ago

Is it possible to set the onSelect to "look" into another JSON file through http.get? I want some comparison done (between json1 and json2) but can't get it to work properly.

Leibniz Over a year ago

Yes you can do that, in the onselect you can perform any logic you want, including making ajax calls. Can you share the code you are using?

mtorn Over a year ago

Oh, good, that's what I was hoping for. I updated my first post with some code (a bit stripped down due to experiments that didn't work out).

Collectives™ on Stack Overflow

Angular-UI Bootstrap Typeahead, multiple output?

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related