65

I have a form that is used to edit a object and I can't select a value in the select box.

I have a json array which represents the to be edited and look like this:

$scope.item = [{
    "objectID": "76",
    "versionID": "0",
    "versionName": "CURRENT",
    "objectName": "xyz",
}]

now I am at the same time populating a select box from another json array that looks like this:

$scope.versions = [
{
    "id": "0",
    "description": "CURRENT",
    "name": "CURRENT"
},
{
    "id": "114",
    "description": "description of Version 2",
    "name": "version2"
},
{
    "id": "126",
    "description": "description of Version 3",
    "name": "version3"
},
{
    "id": "149",
    "description": "description of Version 4",
    "name": "version4"
}]

inside my webpage I am creating the select box as follows:

Version: <select ng-model="item.versionID"
                 ng-selected="item.versionID"
                 ng-options="version.name for version in versions"
                 required>

the select box is populating for me but it should be selecting the the value that matches the version in item. I have tried both versionID and versionName, I have even tried setting ng-selected="0" and that doesn't even work.

I have looked here on SO, the Angularjs site and googled and gone through countless tutorials but still having issues with this. I just can't seem to see what the issue is so any Help greatly appreciated

JSFiddle Added

Added a JsFiddle here

SylvainB
  • 394
  • 7
  • 16
jonnie
  • 12,260
  • 16
  • 54
  • 91

7 Answers7

125

You can simple use ng-init like this

<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options"></select>
aemonge
  • 2,289
  • 1
  • 24
  • 26
  • @Robbo_UK Can you explain me what do you mean ? ty – aemonge Feb 16 '15 at 08:20
  • a drop down with multiple selectable items. figured it out. You add the word multiple. – Robbo_UK Feb 16 '15 at 09:25
  • 9
    Adding to this, if you're building an edit form, where the model may or may not already have a value, this works well: `ng-init="somethingHere = somethingHere || options[0]"` – Tyson Apr 08 '16 at 10:20
  • 1
    In case it happens to someone else, this only worked for me if I added `tracky by` in `ng-options`. My options were a collection of resources that had an `_id`, so my *select* looks like: ` ` – saiyancoder Jan 23 '17 at 03:02
  • what if i want to select version2 as default with out knowing ID – Sandeep Garapati Sep 07 '17 at 10:19
  • You would have to create a function that returns the index of the found element that matches your criterea ( name === 'version2') – aemonge Sep 07 '17 at 11:56
31

You can just append

track by version.id

to your ng-options.

likeitlikeit
  • 5,563
  • 5
  • 42
  • 56
Srivathsa Harish Venkataramana
  • 1,705
  • 21
  • 19
  • Track by should be used when binding to an object. This allows the select box to know what properties to use for the value. If we explicitly indicate the attributes that should be used for the value/text, we would not need to add the track by id.. More information can be found here http://www.ozkary.com/2015/08/angularjs-ngoption-directive-simplified.html – ozkary Sep 04 '15 at 14:44
30

It doesn't set the default value because your model isn't bound to the id or name properties, it's bound to each version object. Try setting the versionID to one of the objects and it should work, ie $scope.item.versionID = $scope.versions[2];

If you want to set by the id property then you need to add the select as syntax:

ng-options="version.id as version.name for version in versions"

http://jsfiddle.net/LrhAQ/1/

noj
  • 6,740
  • 1
  • 25
  • 30
  • is `$scope.item.versionID = $scope.versions[2];` not overwritting the value in my item? I want to be able to select the version from `versions` based on `item.versionID` – jonnie Aug 22 '13 at 13:20
-1

After searching and trying multiple non working options to get my select default option working. I find a clean solution at: http://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/

<select class="ajg-stereo-fader-input-name ajg-select-left"  ng-options="option.name for option in selectOptions" ng-model="inputLeft"></select>
<select class="ajg-stereo-fader-input-name ajg-select-right" ng-options="option.name for option in selectOptions" ng-model="inputRight"></select>

 scope.inputLeft =  scope.selectOptions[0];
 scope.inputRight = scope.selectOptions[1];
Fulup
  • 545
  • 3
  • 14
-1

As per the docs select, the following piece of code worked for me.

<div ng-controller="ExampleController">
<form name="myForm">
<label for="mySelect">Make a choice:</label>
<select name="mySelect" id="mySelect"
  ng-options="option.name for option in data.availableOptions track by     option.id"
  ng-model="data.selectedOption"></select>
</form>
<hr>
<tt>option = {{data.selectedOption}}</tt><br/>
</div>
user1617791
  • 309
  • 2
  • 6
-1
  <select ng-model="selectedCar" ><option ng-repeat="car in cars "  value="{{car.model}}">{{car.model}}</option></select>
<script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.cars = [{model : "Ford Mustang", color : "red"}, {model : "Fiat 500", color : "white"},{model : "Volvo XC90", color : "black"}];
$scope.selectedCar=$scope.cars[0].model ;});
Anirudh Sharma
  • 7,968
  • 13
  • 40
  • 42
Samadhan
  • 389
  • 1
  • 5
  • 18
-3

if you don't even want to initialize ng-model to a static value and each value is DB driven, it can be done in the following way. Angular compares the evaluated value and populates the drop down.

Here below modelData.unitId is retrieved from DB and is compared to the list of unit id which is a separate list from db-

 <select id="uomList" ng-init="modelData.unitId"
                         ng-model="modelData.unitId" ng-options="unitOfMeasurement.id as unitOfMeasurement.unitName for unitOfMeasurement in unitOfMeasurements">
Anindya Mukherjee
  • 97
  • 1
  • 5