Angularjs – set default option in a select via ng-init on VALUE and not INDEX

angularjs

I'm displaying a select dialog like this:

<select ng-model="myFormData.theList" ng-options="list.listName for list in myList track by list.listValue">

which outputs something like this:

<option value="abc">list name 1</option>
<option value="def">list name 2</option>
<option value="ghi">list name 3</option>
<option value="jkl">list name 4</option>

and I know I can have a default selection via the array INDEX by adding a ng-init to my select like this: 

<select ng-model="myFormData.theList" ng-init="myFormData.theList = myList[1]" ng-options="list.listName for list in myList track by list.listValue">

how do I set the default selection by list.listValue?

Best Answer

Set a function on your scope that takes the value and returns the index:

scope.getIndexFromValue = function(value) {
    for(var i=0; i<scope.list.length; i++) {
        if(scope.list[i].listValue === value)
             return i;
    }
};

then call it from the ng-init markup:

<select ng-model="myFormData.theList" ng-init="myFormData.theList = myList[getIndexFromValue('abc')]" ng-options="list.listName for list in myList track by list.listValue">
Related Topic