ng-selected not working in select element

Question

I have a bound select

<select ng-model="collegeSelection" ng-options="c as c.CollegeName for c in colleges" ng-selected="c.CollegeName == collegeSelection.CollegeName" name="selectCollege" id="selectCollege"></select>  

but when both c.CollegeName == collegeSelection.CollegeName match the item still isn't selected. Documentation doesn't seem to help. Any ideas?

Solution 1

ng-selected should be used in the <option> tag, not in the <select> tag. Take a closer look at its doc and the example.

Because the select directive's determination of the selected option is based on ngModel. Therefore, once you remove ng-selected="c.CollegeName == collegeSelection.CollegeName", your code should work.

I created a very simple plunk to demonstrate the "selected" feature in select directive.

More details:

AngularJS uses ngModel directive to enable "two-way data binding" between your model and UI elements.

In the case of "select", the model collegeSelection you specified as <select ng-model="collegeSelection" ...> is the selected item. Which means if an user selects an item from the dropdown on the page, collegeSelection will be set to that item; and, if you set collegeSelection to an item in your javascript code, AngularJS will make sure that the corresponded <option> is selected.

Say you have the following code in your controller:

$scope.colleges = [
    {id: 0, name: 'a'},
    {id: 1, name: 'b'},
    {id: 2, name: 'c'}
];

$scope.collegeSelection = $scope.colleges[0];

And the HTML looks like:

<select ng-model="collegeSelection" ng-options="c as c.name for c in colleges"></select>

That's it! The first college in the colleges array will be selected if you run the code.

Just remember collegeSelection is the selected option, no matter it's because user selected an item on the UI, or you selected an item in javascript.

That's how two-way data binding works.

Solution 2

After playing around with ng-selected for a while I was not able to get it to work like you're asking. However, I was able to pre-select a specific option using ng-init.

Here's a JSFiddle of my solution. My <select> ended up being:

 <select ng-model="selectedColor" ng-options="color.value as color.name for color in colors" ng-init="selectedColor='yellow'">
   <option value="">Select A Color</option>
 </select>`

And my colors array is:

 colors = [
        {name:'Red', value: 'red'}, 
        {name:'Orange', value: 'orange'}, 
        {name:'Yellow', value: 'yellow'}, 
        {name:'Green', value: 'green'}, 
        {name:'Blue', value: 'blue'}, 
        {name:'Indigo', value: 'indigo'}, 
        {name:'Violet', value: 'violet'}
 ]

Changing the ng-init="selectedColor='yellow'" to another value will select a different option.

Solution 3

Some people have problems with this. I found a great solution for a simple drop down if controller as someController

var vm = this;
this.colors = [
        {name:'Red'}, 
        {name:'Orange'}, 
        {name:'Yellow'}, 
        {name:'Green'}, 
        {name:'Blue'}, 
        {name:'Indigo'}, 
        {name:'Violet'}
 ];
this.color_selected = "Yellow";
<select ng-model="someController.color_selected" ng-options="opt.name as opt.name for opt in someController.colors">
</select>

`

Comments

[rross]

I see, but what I'm trying to do is make a certain item within the select element the selected element. How would one do that?

[Ye Liu]

You just need to set the collegeSelection model.

[Ye Liu]

You don't necessarily need ngInit. Try to add $scope.selectedColor = 'yellow'; after your $scope.colors = [...];