Material: md-autocomplete - bind a single property to the model.

[vigneshnrfs]

Hi.

I am not sure if this is already available, similar to the select field where you can display a different property in an object but bind to another property in the object to the model.

At present, it binds the entire object to the model.

[debuggerpk]

:+1: i want to be able to bind to item.id rather than complete model.

[topherfangio]

Can one of you provide a demo showing what you are currently doing, and what you want it to do so that we can better understand?

Are you basically wanting something like the select's ng-value attribute?

[debuggerpk]

although i wrote a hack to what i wanted to achieve but here is the scenario

i have a resource, when fetched from looks something like this

{
    "id": 52,
    "is_paid": false,
    "added_on": "2015-09-19T01:11:42.077247Z",
    "updated_on": "2015-09-19T01:22:50.867231Z",
    "name": "Test with circles",
    "description": "abra cadabra",
    "is_active": false,
    "circles": [
        17,
        18,
        22
    ]
}

the circles above represents id's that are fetched from the database. however the complete circle resource looks something like this.

{
    "id": 47,
    "name": "Service",
    "parent": null
}

And when creating a new resource, i am using md-chips with md-autocomplete, after i have selected the new resource, the final data formed an array of complete objects, rather than array of id.
What i have done to get passed is, map the array of circle ids with complete objects after i have fetched the complete circle resource to get passed this on edit form, i.e.

response.circles = response.circles.map(function(d) {
  var index = _.findIndex(self.circles, function(c) {
    return parseInt(c.id) === parseInt(d);
  })
  console.log(index);
  d = self.circles[index];
  return d;
});

and for creating a new resource, i replace the json array of objects with json of ids before i send an xhr request, like this

self.resource.circles = self.resource.circles.map(function(c) {
  c = c.id;
  return c;
});

Is there a way that the directive can do this on its own, that mapping the single property with the lookup array to display?

I don't know if i am properly able to explain the use case or not.

Thanks for help.

//ysf

[brenovieira]

+1

[makkart]

+1 for some kind of ng-value attibute

[jamesbenn]

+1 for a ng-value attribute ran into this issue when trying to replace my bootstrap auto-completes with md-angular controls.

[dspanizzo]

+1 For a "value" or "ng-value" on Chips to bind the model to the item.id and show item.name on template.

[ryanxdrake]

In the example below, I have a countries.json file that I'm populating my md-select with, and several key/value pairs:

{"name":"Australia","tld":".au","cca2":"AU","ccn3":36,"cca3":"AUS","currency":"AUD","calling-code":"61","alt-spellings":"AU","relevance":1.5,"region":"Oceania","subregion":"Australia,New Zealand"}

HTML:
My HTML is simply using a Autocomplete component, but I've tried to use ng-value to only bind the "cca2" value to the model, without any luck.

<ol-lookup-input 
items="vm.allCountries" 
ng-value="vm.allCountries.cca2" 
selected-items="vm.filter.value" 
search-field="name" 
placeholder="Type to add a country">
</ol-lookup-input>

CURRENT UI:

For obvious reasons, I don't want to send back all the country details to the backend, and there can be multiple values, which would make the payload very messy.

IDEAL UI:

What I really want is to just send through an array of the "cca2" values associated with each country, as below:

[ryanxdrake]

@ThomasBurleson Any update on when this fix will be rolled out?

[simonbernard]

+1, this would be very helpfull. I am using CouchDB as a backend and from a view I get something like:

{
  rows: [
    id: "some_id",
    key: "emitted_key",
    value: {/* my value */}
  ]
}

It would be great if I could only bind the value to my model when a selection is made.

[scottsword]

So frequently in Angular forms I use the following pattern.

<form>
  <input type="text" ng-model="$ctrl.person.name" />
  <input type="text" ng-model="$ctrl.person.title" />
  <input type="text" ng-model="$ctrl.person.location" />
  <button ng-click="$ctrl.submit($ctrl.person)">Submit</button>
</form>

If you try to use the pattern labeled above using autocomplete for title and location then the first bound item clobbers the second. So Converting $ctrl.person.title and $ctrl.person.location to Angular Material autocompletes it stomps on any subsequent properties on that bound model. This is not how the typical ng-model works when it comes to binding. A work around for now is to have each of these be discrete models $ctrl.title and $ctrl.location, but this is not optimal.

Here is an example of the issue where _alpha_ and _bravo_ are two separate models, but alpha is stomping on bravo.

[scottsword]

Disregard my previous comment. You can in fact bind to different models you just need to use a different md-search-text value as well as md-selected-item.

[debuggerpk]

@scottsword can you share an example?

[scottsword]

@ysfjwd Sorry I meant to paste an example in my first comment above.
Here is an example of the issue I ran into - http://codepen.io/anon/pen/YqPyOK
You can remedy it by using the md-search-text solution stated above.

[debuggerpk]

@scottsword thankyou very much 💃

[scottsword]

@ysfjwd np!

[james-bjss]

Hi, trying to follow this. Has this actually been resolved or was it closed off the back of @scottsword comments?

If I'm not mistaken @scottsword comment was in relation to binding to multiple models not binding a specific value like ng-value.

[ThomasBurleson]

This issue is closed as part of our deprecation effort.

 For details, see our post [Spring Cleaning 2016](https://groups.google.com/forum/#!topic/ngMaterial/3Ip9nd68bfk).

[dsgriffin]

You can use the md-transform-chip property to bind the model to a property, e.g. to only store the email property of an object use md-transform-chip="$chip.email"