Angular simple select issue

Question

I assume it should be a common pattern how people deal with it, but I am surprised why I can't find anything on the internet.

Lets say I have array of objects and I want to display these objects for customer in typeahead window. When customer select something I want to remember customer choice and process further.

Problem: All items displayed in customer readable format - item.name (London, Lisbon, Manchester) When customer select something, my ng-model fromSelected equals just to city string name, which means nothing for me, because I still need id for further processing.

Could you please suggest how I can make fromSelected be equal to object rather than string but at the same time provide friendly output to user?

var app = angular.module("fly");

app.controller('PlaceController', function($scope) {


$scope.fromSelected ='';

$scope.getPlace = function() {

  var items = []
  items.push({
        'id': 1,
        'name': London
      });
  items.push({
      'id': 2,
      'name': Lisbon
      });

 return items;
};

});

HTML:

<input type="text" ng-model="fromSelected" placeholder="Country, city or airport" typeahead="place.name for place in getPlace()" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">

your fromSelected will have place selected object..you could simply do fromSelected.id — Pankaj Parkar
– Pankaj Parkar, Commented Aug 26, 2015 at 19:16

bobleujr · Accepted Answer · 2015-08-26 19:18:12Z

2

Wild Goat,

your typeahead sentence can do that for you. like item as item.name for item in data | filter:$viewValue

This basically tells your typeahead to show your item.name, but to return your object item to the model

This plunker will help you doing that

answered Aug 26, 2015 at 19:18

bobleujr

1,1741 gold badge10 silver badges24 bronze badges

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

5 Comments

Wild Goat Over a year ago

Solid answer, thanks a lot! Could you please explain what does | filter $viewValue does, if I include it I my typeahead window doesn't get populated or I can't see how it is populated? What could be a reason?

bobleujr Over a year ago

$viewValue as in the documentation is the actual string value in the view. It is passing the filter the value of the view so it can filter your results. Did you try removing it? What was the result?

Wild Goat Over a year ago

When I remove it it works. What is the case when we want to filter on $viewValue?

bobleujr Over a year ago

Good question. I will explain to you based on my empirical tests. If your array is an object (which was my case), you'd need to specify what is the property you want to look for when filtering your list. In short: this is a variable exposed by a directive in an expression that returns results based on a value entered by a user. It is a little bit confusing because you are already setting item.name as your 'filterable value', and that is probably why don't need to tell the filter "hey, filter 'name' according to '$viewValue'. Hope this makes sense to you

Wild Goat Over a year ago

Got it! Thanks a lot!

Collectives™ on Stack Overflow

Angular simple select issue

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related