AngularJS Typeahead display object

Question

I am trying to get my application to have a typeahead control in one of my views. Currently I have it set up exactly the same as this example:

http://plnkr.co/edit/5kGZkNPZ7rIFfb4Rvxej?p=preview

But to fit my needs, I have to get it to show the entire object in the dropdown. My array looks a bit like this:

self.tests = [
    {
        "detail": "27/06/2015, 1 Lines, £478.40",
        "title": "HOM026MA01|ww06-1526",
        "type": "O",
        "value": "W0669090"
    },
    {
        "detail": "25/06/2015, 3 Lines, £1390.92",
        "title": "BER0050000|andrew02",
        "type": "O",
        "value": "W0667777"
    }
];

so I changed my html to this:

<input type="text" placeholder="Search" ng-model="controller.selected" typeahead="stuff as stuff.value for stuff in controller.tests | filter:$viewValue" />

As you can see, this will show the value of the json object, but I would like it to show the other details too. Does anyone know how you can do that?

show the other details means? which property you wanted to show,, — Pankaj Parkar
– Pankaj Parkar, Commented Jun 28, 2015 at 17:45

Pankaj Parkar · Accepted Answer · 2015-06-28 17:54:40Z

1

You could simply use string concatenation here

<input type="text" placeholder="Search" 
  ng-model="controller.selected" 
  typeahead="stuff.value + ' ' + stuff.title + ' '+  stuff.detail for stuff in controller.tests | filter:$viewValue" />

Demo Plunkr

edited Jun 28, 2015 at 17:54

answered Jun 28, 2015 at 17:47

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Typeahead display object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related