angular and select - setting the default value

Question

I am struggling trying to set the default value of a select box from a value in the controller.

my controller has

controller.item = {name: "bar1", value:1}
controller.items = [{name: "bar0", value:0},{name: "bar1", value:1}]

my html is

<p>{{controller.item}}</p>
<select ng-model="controller.item" ng-options="item.name for item in controller.items" >
</select>

when i run the code, the correct value of controller.item is shown in the form

{"name": "bar1", "value": 1}

but the select box has the first entry showing (bar0)

what am I missing here ? I've looked on the web, but all the examples I've seen say that you must do

controller.item = controller.items[0]

however, that's not right for the scenario where the value is already set

thanks

Cyberdelphos · Accepted Answer · 2015-07-09 19:30:35Z

Using your notation Angular is trying to match item.name with your entire item object.

item to match: {name: "bar1", value:1}
value to match againist: 'bar1'

'bar1' != {name: "bar1", value:1} // Nothing selected by default since no matching ocurrs

In order to do the match correctly you should try using the complete ng-optons notation:

<select ng-model="controller.item" ng-options="item as item.name for item in controller.items"></select>

Here you'll be defining controller.item as your model and it will check with the entire item object in your ng-options but be labeled as item.name (since you defined it in the ng-options declaration), so your select will render your objects name property as options, and not the entire object, but it will do the matching againist the entire object

tymeJV · Accepted Answer · 2015-07-09 19:20:24Z

1

Your ngOptions is a bit off, the syntax is value as text for item in array - so set the value to item

<select ng-model="controller.item" ng-options="item as item.name for item in controller.items" >
</select>

And to default:

controller.items = [{name: "bar0", value:0},{name: "bar1", value:1}]
controller.item = controller.items[0];

answered Jul 9, 2015 at 19:20

tymeJV

105k14 gold badges165 silver badges158 bronze badges

2 Comments

jmls Over a year ago

sorry, that was a typo on my part. I do have item as item.name for item in controller.items I don't want to default the select to the initial entry - I want the select to show the current value of controller.item, not to set controller.item to the first item in the array ;)

tymeJV Over a year ago

@jmls -- The value in the select has to be available inside the ngOptions array - it can't be an unknown

Community · Accepted Answer · 2017-05-23 11:58:16Z

Your problem here is controller.item is not the same as controller.items[1].

I'm sure someone could expand upon why that is way better than I could but it has to do with comparing objects in JavaScript.

Here is a link to another post for that.

What you're going to want to do is find the object you want in the array and set that to controller.item.

app.controller('MainCtrl', function($scope) {
  var controller = this;
  var tempItem = {name: "bar1", value:1};
  controller.items = [{name: "bar0", value:0},{name: "bar1", value:1}]

  for(var i = 0; i < controller.items.length; i++){
    if(controller.items[i].name == tempItem.name) {
      controller.item = controller.items[i];
    }
  }
});

You can achieve the same effect with the amazingly amazing library underscore.js like this.

controller.item = _.findWhere(controllerItems,{name: tempItem.name});

Plunker here

cespon · Accepted Answer · 2015-07-09 19:42:35Z

1

HTML:

<p>{{item}}</p>
<select ng-model="item" ng-options="item.name for item in items" >
</select>

Controller:

angular.module('app',[])
.controller('MainCtlr',function($scope){
  var selected = 0;
  $scope.items = [
    {name: "bar0", value:0},
    {name: "bar1", value:1}
  ];
  $scope.item = $scope.items[selected];
});

When you set a default option in a ng-options directive, must be by reference. You can't create a new object. The documentation says:

By default, ngModel watches the model by reference, not value

http://codepen.io/ces/pen/jPxBZz

edited Jul 9, 2015 at 19:42

answered Jul 9, 2015 at 19:23

cespon

5,8107 gold badges38 silver badges49 bronze badges

2 Comments

jmls Over a year ago

thanks - but I don't want to default the select to the fist entry in the array - I want the select to show the current value of controller.item

cespon Over a year ago

The default option must be a element of the ng-options array.

Luis Delgado · Accepted Answer · 2015-07-09 19:18:54Z

-1

You need to add the selected attribute to the corresponding option element within the select

answered Jul 9, 2015 at 19:18

Luis Delgado

3,7445 gold badges37 silver badges55 bronze badges

1 Comment

tymeJV Over a year ago

Won't work Angular ngOptions - there aren't any option tags.

Collectives™ on Stack Overflow

angular and select - setting the default value

5 Answers 5

Comments

2 Comments

Comments

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

2 Comments

1 Comment

Linked

Related