ng-options track by and select as are not compatible

When both a track by expression and a select as expression are used in ng-options, binding doesn't work anymore.

For instance:

      it('should bind to scope value through experession while tracking/identifying objects', function() {
        createSelect({
          'ng-model': 'selected',
          'ng-options': 'item.id as item.name for item in values track by item.id'
        });

        scope.$apply(function() {
          scope.values = [{id: 10, name: 'A'}, {id: 20, name: 'B'}];
          scope.selected = scope.values[0].id;
        });

        expect(element.val()).toEqual('10');

        scope.$apply(function() {
          scope.selected = scope.values[1].id;
        });

        expect(element.val()).toEqual('20');
      });

It seems that in the ngOptions directive, the track function always directly use the value expression even if a select as expression is set.

Oops, accidentally deleted my previous comment.
I created/modified a fiddle to illustrate the problem:
http://jsfiddle.net/qWzTb/418/

+1 I'm having the same problem.

It's annoying but you can really just leave away the track by and it'll work.

Can confirm this problem still exists as of v1.3.0-beta.15.

Having the same problem with 1.2.20 :/

Same here

Failing test case for angular#6564

@quazzie

I've been encountering this again.
The problem was created in c32a859 by @quazzie:

For checking if an option is selected, the trackFn is used, where the valueFn should be used instead. I'll try to come up with a fix.

Ok, I have investigated this. It's not actually a bug, just misleading documentation.
The thing is, you just can't combine value as label for collection with track by.
You have to pick the one or the other. There are two different Use Cases:

1. You want a shiny presentation for an ugly value

Use value as label:

items = [
  {value: 1, label: 'One'},
  {value: 2, label: 'Two'},
]
template = 'ng-options="item.value as item.label for items"'

When you change the dropdown, the model is assigned whatever you define in front of the as.

2. You want to iterate over complex objects

Use track by:

items = [
  {id: 1, ...},
  {id: 2, ...},
  {id: 3, ...},
]
template = 'ng-options="item as item.label for items track by items.id"'

When you change the dropdown, the model is assigned the item. The track by expression is only used to associate options with items through the value attribute on the <option>.

Illustrated in http://jsfiddle.net/0vpsv1wa/1/

fix(select): add basic track by and select as support

Thanks for bringing the issue up, and thanks for the feedback on the approaches. This is a tough problem without a clean solution that satisfies all constraints, is consistent with ng-repeat, and is backwards-compatible. In the meantime, I removed the thrown error, added tests for how track by and select as should work together, and fixed the implementation.

Unfortunately, the originally reported issue would not work with the expression/model as is, but could work with some re-working.

This is still happening in v1.4.7, no fix yet?

same problem here!!

Same problem!!

same thing here with in v1.4.7

Same thing with v1.4.8

Same thing with v1.5.3

The ng-options works fine, but when update the model manual, the select value hadn't update.

<select ng-model="shiny"
                ng-options="opt.value as opt.label for opt in options">
            </select>

$scope.complex = 2;

See the http://jsfiddle.net/0vpsv1wa/110/

There are certain (documented) limitations in using track by together with select ... as.
Not all usecases are supported.

ng-options="item.id as item.name for item in values track by item.id" works, but doesn't se the default value
http://plnkr.co/edit/6YdeJviPnCwY3Em9ltyo?p=preview

No, it doesn't work (i.e. track by has no effect).

is there a solution to this yet?
https://stackoverflow.com/questions/44629489/malfunctioning-select-option-dropdowns-while-using-ngrepeat-or-ngoptions-ngmo

Navigation Menu

Repository navigation

ng-options track by and select as are not compatible #6564

1. You want a shiny presentation for an ugly value

2. You want to iterate over complex objects

39 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

ng-options track by and select as are not compatible #6564

Description

Activity

janv commented on May 13, 2014

SQiShER commented on May 13, 2014

janv commented on May 13, 2014

ahoereth commented on Jul 15, 2014

wojciechfornal commented on Jul 21, 2014

mvalim commented on Aug 6, 2014

janv commented on Aug 8, 2014

janv commented on Aug 8, 2014

1. You want a shiny presentation for an ugly value

2. You want to iterate over complex objects

39 remaining items

jeffbcross commented on Oct 10, 2014

jonathansolorzn commented on Nov 19, 2015

mariusstaicu commented on Nov 28, 2015

agvalente commented on Dec 1, 2015

DanieleSassoli commented on Dec 8, 2015

dlazzarino commented on Mar 14, 2016

aj07mm commented on May 5, 2016

hebergentilin commented on May 10, 2016

gkalpak commented on May 13, 2016

mgsstms commented on Jan 29, 2017

gkalpak commented on Jan 29, 2017

kash-pram commented on Jun 19, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions