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

score 1 · Answer 1 · answered Jul 09 '15 at 19:20

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 09 '15 at 19:20

tymeJV

103,943
14
161
157

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 ;) – jmls Jul 09 '15 at 19:28
@jmls -- The value in the `select` has to be available inside the `ngOptions` array - it can't be an unknown – tymeJV Jul 09 '15 at 19:30

cespon · Answer 2 · 2015-07-09T19:42:35.243

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 09 '15 at 19:42

answered Jul 09 '15 at 19:23

cespon

5,630
7
33
47

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 – jmls Jul 09 '15 at 19:31
The default option must be a element of the `ng-options` array. – cespon Jul 09 '15 at 19:42

Cyberdelphos · Accepted Answer · 2015-07-09T19:30:35.360

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

score 1 · Answer 4 · edited May 23 '17 at 11:58

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

score -1 · Answer 5 · answered Jul 09 '15 at 19:18

-1

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

answered Jul 09 '15 at 19:18

Luis Delgado

3,644
4
34
54

Won't work Angular `ngOptions` - there aren't any `option` tags. – tymeJV Jul 09 '15 at 19:21

angular and select - setting the default value

5 Answers5