CODEWITHSUNDEEP
angularjs
François Romain
François Romain

Reputation: 14393

how to use ng-option to set default value of select element

I've seen the documentation of the Angular select directive here: http://docs.angularjs.org/api/ng.directive:select. I can't figure how to set the default value. This is confusing:

select as label for value in array

Here is the object:

{
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
}

The html (working): 

<select><option ng-repeat="value in prop.values">{{value}}</option></select>

and then I'm trying to add an ng-option attribute inside the select element to set prop.value as the default option (not working).

ng-options="(prop.value) for v in prop.values"

What am i doing wrong?

Upvotes: 151

Views: 435797

Answers (12)

Jenna Leaf
Jenna Leaf

Reputation: 2452

Really simple if you do not care about indexing your options with some numeric id.

  1. Declare your $scope var - people array

     $scope.people= ["", "YOU", "ME"];

  2. In the DOM of above scope, create object

     <select ng-model="hired" ng-options = "who for who in people"></select>

  3. In your controller, you set your ng-model "hired".

     $scope.hired = "ME";

It's really easy!

Upvotes: 1

tyne
tyne

Reputation: 115

Just to add up, I did something like this.

 <select class="form-control" data-ng-model="itemSelect" ng-change="selectedTemplate(itemSelect)" autofocus>
        <option value="undefined" [selected]="itemSelect.Name == undefined" disabled="disabled">Select template...</option>
        <option ng-repeat="itemSelect in templateLists" value="{{itemSelect.ID}}">{{itemSelect.Name}}</option></select>

Upvotes: 0

Surya R Praveen
Surya R Praveen

Reputation: 3745

<select id="itemDescFormId" name="itemDescFormId" size="1" ng-model="prop" ng-change="update()">
    <option value="">English(EN)</option>
    <option value="23">Corsican(CO)</option>
    <option value="43">French(FR)</option>
    <option value="16">German(GR)</option>

Just add option with empty value. It will work.

DEMO Plnkr

Upvotes: 10

Wyetro
Wyetro

Reputation: 8578

An easier way to do it is to use data-ng-init like this:

<select data-ng-init="somethingHere = options[0]" data-ng-model="somethingHere" data-ng-options="option.name for option in options"></select>

The main difference here is that you would need to include data-ng-model

Upvotes: 8

David Douglas
David Douglas

Reputation: 10503

The ng-model attribute sets the selected option and also allows you to pipe a filter like orderBy:orderModel.value

index.html

<select ng-model="orderModel" ng-options="option.name for option in orderOptions"></select>

controllers.js

$scope.orderOptions = [
    {"name":"Newest","value":"age"},
    {"name":"Alphabetical","value":"name"}
];

$scope.orderModel = $scope.orderOptions[0];

Upvotes: 4

Humberto Morera
Humberto Morera

Reputation: 1109

This answer is more usefull when you are bringing data from a DB, make modifications and then persist the changes.

 <select  ng-options="opt.id as opt.name for opt in users" ng-model="selectedUser"></select>

Check the example here:

http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV

Upvotes: 44

BatteryAcid
BatteryAcid

Reputation: 8881

If your array of objects are complex like:

$scope.friends = [{ name: John , uuid: 1234}, {name: Joe, uuid, 5678}];

And your current model was set to something like:

$scope.user.friend = {name:John, uuid: 1234};

It helped to use the track by function on uuid (or any unique field), as long as the ng-model="user.friend" also has a uuid:

<select ng-model="user.friend" 
ng-options="friend as friend.name for friend in friends track by friend.uuid"> 
</select>

Upvotes: 21

code_maestro
code_maestro

Reputation: 21

If anyone is running into the default value occasionally being not populated on the page in Chrome, IE 10/11, Firefox -- try adding this attribute to your input/select field checking for the populated variable in the HTML, like so:

<input data-ng-model="vm.x" data-ng-if="vm.x !== '' && vm.x !== undefined && vm.x !== null" />

Upvotes: 1

James Kleeh
James Kleeh

Reputation: 12228

So assuming that object is in your scope:

<div ng-controller="MyCtrl">
  <select ng-model="prop.value" ng-options="v for v in prop.values">
  </select>
</div>

 

function MyCtrl($scope) {
  $scope.prop = {
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
  };
}

Working Plunkr: http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g

Upvotes: 132

Jess
Jess

Reputation: 25029

The angular documentation for select* does not answer this question explicitly, but it is there. If you look at the script.js, you will see this:

function MyCntrl($scope) {
  $scope.colors = [
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'dark'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}
  ];
  $scope.color = $scope.colors[2]; // Default the color to red
}

This is the html:

<select ng-model="color" ng-options="c.name for c in colors"></select>

This seems to be a more obvious way of defaulting a selected value on an <select> with ng-options. Also it will work if you have different label/values.

* This is from Angular 1.2.7

Upvotes: 69

Wiston Coronell
Wiston Coronell

Reputation: 3571

I struggled with this for a couple of hours, so I would like to add some clarifications for it, all the examples noted here, refers to cases where the data is loaded from the script itself, not something coming from a service or a database, so I would like to provide my experience for anyone having the same problem as I did.

Normally you save only the id of the desired option in your database, so... let's show it

service.js

myApp.factory('Models', function($http) {
var models = {};
models.allModels = function(options) {
    return $http.post(url_service, {options: options});
};

return models;
});

controller.js

myApp.controller('exampleController', function($scope, Models) {
$scope.mainObj={id_main: 1, id_model: 101};
$scope.selected_model = $scope.mainObj.id_model;
Models.allModels({}).success(function(data) {
    $scope.models = data; 
});
});

Finally the partial html model.html

Model: <select ng-model="selected_model" 
ng-options="model.id_model as model.name for model in models" ></select>

basically I wanted to point that piece "model.id_model as model.name for model in models" the "model.id_model" uses the id of the model for the value so that you can match with the "mainObj.id_model" which is also the "selected_model", this is just a plain value, also "as model.name" is the label for the repeater, finally "model in models" is just the regular cycle that we all know about.

Hope this helps somebody, and if it does, please vote up :D

Upvotes: 9

nirav
nirav

Reputation: 291

<select name='partyid' id="partyid" class='span3'>
<option value=''>Select Party</option>
<option ng-repeat="item in partyName" value="{{item._id}}" ng-selected="obj.partyname == item.partyname">{{item.partyname}}
</option>
</select>

Upvotes: 23

Related Questions