Material: Using trackBy causes model to trigger ng-change even when it hasn't changed.

[kikhtenko]

Hi,

when I use md-select with mg-model which has pre-selected value and this value is actually an object but not a string, control doesn't show the selected item.
In previous releases I could use md-select-label but now it's being removed.
The examples are here:
http://plnkr.co/edit/7AzpwHFGVaPt9kiFv6Fv?p=preview - when ng-model value is an object - doesn't work

http://plnkr.co/edit/966Xez4lQ79NWFIIT5tJ?p=preview - when ng-model value is a string - works fine

Regards,

[vovashevchenko]

+1

[asadovnikov]

+

[soutlan]

+++

[ivorobkalo]

+1

[Nickproger]

+1

[darknode]

+1

[kikhtenko]

I investigated the code and found that ng-model-options can possibly be used in this case but it doesn't work anyway.
ng-model-options="{trackBy: 'item.id'}" doesn't help much.

[alexitooi]

ng-model-options="{ trackBy: '$value.id' }" should do the trick ;-)

but I am also using md-on-open on the md-select and also a wrapping md-input-container!

[kikhtenko]

nope, I've already tried this. You can check this http://plnkr.co/edit/ykk9IrCbuD1ZpqqLekLg?p=preview

[bijoux]

I use ngSelected in cases like this. It's more readable atleast for me.
ng-selected="vm.selectedItem.id === item.id"

[kikhtenko]

This doesn't work either.
Check this
http://plnkr.co/edit/dGGXOEBhfNYSRCBIDCuw?p=preview
It works with select tag but not with md-select

[websirnik]

+1

[bshir]

Modifying the example from the demo page. Fixed in this scenario by setting ng-value instead of value on the md-option
initialize with object: http://codepen.io/anon/pen/XbQzbM
initialize with string: http://codepen.io/anon/pen/xGePGX

Still encountering issues in other scenarios. I'm wondering if it is at all related to the $$mdSelectId property. The temporary fix that we have been doing is finding the selected value from the options array and setting it in the controller.
example:

// these would actually be returned from API call.
var options = [ { id: 1, name: 'one' }, { id: 2, name: 'two'} ];
var item = { 
  name: 'some name'
  selectedOption: { id: 1, name: 'one' }
}; 
// init 
item.selectedOption = _.find(options, 'id', item.selectedOption.id);

_Edited_: see @bjoernricks comment below. combining ng-value with ng-model-options solves the issue. This seems to have the negative side effect of setting the form $dirty to true.
Forked plunk: http://plnkr.co/edit/w4xdmqqr7yiYJ2DAjp0c?p=preview

[bjoernricks]

@kikhtenko bashir is right. ng-value instead of value together with ng-model-options="{ trackBy: '$value.id' }" fixes the issue. See http://plnkr.co/edit/s9roP5sWsZIZUWGakGM9?p=preview

[Ronani]

@bshir thanks! still I hope it will be fixed :+1:

[dmackerman]

There is a bug with this approach and ngChange, it fires immediately when using this - regardless of whether the model has changed or not. Looks like it was fixed by this issue:

https://github.com/angular/angular.js/issues/11936

However I'm still seeing the behavior.