ng-options and ng-model preselected value

Question

I'm trying to preselect value with ng-options. Here's what

 <select ng-model="promocode.PRODUCT" ng-change="getSomething()" ng-options="product as product.NAME for product in products">

The problem is in selected by default value. I have promocode.PRODUCT object the same as in ng-options, but angular set default value empty.

Where is my mistake?

Is promocode.PRODUCT literally the same object, or is it an object with the same values? What properties does promocode.PRODUCT have? — Cerbrus
– Cerbrus, Commented May 12, 2016 at 6:32
Yes, it's the same. 3 fields: {ID: "string", TYPE: "string", NAME: "string"}. — Buckwheat
– Buckwheat, Commented May 12, 2016 at 6:48
It it The same object, or is just the contents the same? Did you assign products[x] to promocode.PRODUCT somewhere? — Cerbrus
– Cerbrus, Commented May 12, 2016 at 6:49
Not really. The problem is that angular is comparing selected items with something like ==. Objects don 't really play nice with that. (Try: console.log({} == {})). That's why you need a track by to tell angular to compare the id properties, instead. — Cerbrus
– Cerbrus, Commented May 12, 2016 at 7:02

Cerbrus · Accepted Answer · 2016-05-12 06:53:23Z

Assuming your products have some kind of id property, this should do the trick:

 <select ng-model="promocode.PRODUCT" ng-change="getSomething()" ng-options="product as product.NAME for product in products track by product.id">

track by product.id tells angular to compare array items by their id property, instead of comparing equality between objects.

Here's some more info on tracking / ng-options.

And a working example:

var myApp = angular.module('myApp', []); myApp.controller("controller", function($scope) { $scope.products = [{ id: 1, name: 'FirstProduct' }, { id: 2, name: 'SecondProduct' }]; $scope.promocode = { product: { // Here I am using a placeholder product to illustrate that id: 2 // the select is identifying the correct row by it's `id`. } }; });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="controller"> <select ng-model="promocode.product" ng-change="getSomething()" ng-options="product as product.name for product in products track by product.id"> </select> <br/> {{promocode.product}} </div>

A better option would be to select the correct row, like this:

$scope.promocode = $scope.products[1];

Then you won't have to duplicate any data.

But assuming to docs, track by does't work with AS in ng-options... I had some throubles with this... can't mention what exactly...
@Buckwheat: I provided a working snippet. As you can see, there's no problem using as with track by.

Satpal · Accepted Answer · 2016-05-12 06:50:11Z

1

Assuming product has id property, You need to use select as label group by group for value in array track by trackexpr, Read DOCs

 <select ng-model="promocode.PRODUCT" ng-change="getSomething()" ng-options="product as product.NAME for product in products track by product.ID"> </select>

edited May 12, 2016 at 6:50

answered May 12, 2016 at 6:35

Satpal

134k13 gold badges168 silver badges171 bronze badges

6 Comments

devqon Over a year ago

Don't know about the downvoter, this seems correct. But I would do it like this: jsfiddle.net/zshdb051/1 (assigning the product to the promocode)

Cerbrus Over a year ago

You're changing the model binding from product to product.NAME. That's fundamentally changing how the select works. (So no, @devqon, this answer isn't correct)

devqon Over a year ago

Never mind, something went wrong with saving the jsfiddle :)

Buckwheat Over a year ago

Dude, you are rescuer.) This works. By as I mention, AS doesn't works together with track by in ng-options. For the future readers.

Buckwheat Over a year ago

@Satpal, Done. Thanks

|

Vinay · Accepted Answer · 2016-05-12 07:51:28Z

Try this..

<select ng-model="promocode.PRODUCT" ng-change="getSomething()" ng-options="product as product.NAME for product in products track by product.ID"> <option selected disabled>{{Your default value}}</option> </select>

Collectives™ on Stack Overflow

ng-options and ng-model preselected value

3 Answers 3

2 Comments

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

Comments

Related