How to pre-select a default option in ng-options using $scope variable
Question
I have a <select> in a form with other fields, like so-
<form class="formCSS">
<div class="inputs">
<label class="labelTag">Name *:   </label>
<select class="inputTag" ng-model="selectedName"
ng-options="n.name for n in adminNames"></select>
</div>
</form>
adminChannels is an object array of this structure {_id:"....", name:"..."}
When I "transitionTo" this state, I pass a name (which exists in adminNames too) like so -
$state.go('schedule',{name:response.name});
I want the said name (accessed using $scope.name ) to be pre-selected when this template loads.
I tried something like this -
ng-init = "selectedName=adminNames[adminNames.indexOf(name)]"
I do get the auto-populated drop-down menu but nothing gets selected as default.
I went through all other posts about selecting default options, none of them provide info about pre-selecting using $scope variable.
Please let me know if I've to provide any more info/code. Thanks in advance!
2 answers
solution1
1 2018-09-01 20:21:39
Use Array.find() :
$scope.selectedName = $scope.adminNames.find( x => (x.name == $scope.name));
The find() method returns the value of the first element in the array that satisfies the provided testing function.
Another approach is to use the as clause in the ng-options directive:
<select class="inputTag" ng-model="selectedName"
ng-options="n.name as n.name for n in adminNames">
</select>
The DEMO
angular.module("app",[]) .controller("ctrl",function($scope) { $scope.adminNames=[ {name: "fred"}, {name: "jane"}, {name: "sally"}, ]; $scope.selectedName="jane"; $scope.find = function(name) { return $scope.adminNames.find( x => (x.name == name)); }; });
<script src="//unpkg.com/angular/angular.js"></script> <body ng-app="app" ng-controller="ctrl"> <select class="inputTag" ng-model="selectedName" ng-options="n.name as n.name for n in adminNames"> </select> <br> object = {{find(selectedName)}} </body>
For more information, see
solution2
0 2018-08-31 23:00:16
When I started debugging stage-by-stage, I saw that adminNames[adminNames.indexOf(name)] was "undefined".
So I did this in the controller instead, to find the index of the $scope.name that is received -
var index = $scope.adminNames.map(function(e) { return e.name; }).indexOf($scope.name);
$scope.selectedName = $scope.adminNames[index];
This SO question/answer helped me figure this out.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.