CODEWITHSUNDEEP
angularjs
Mr.Pandya
Mr.Pandya

Reputation: 2038

Not displaying first option in select Element?

Not displaying first option in select Element? Here drop down list starting with empty option.Why i am not getting first option as o index of array? Why does angularjs include an empty option in select how to use ng-option to set default value of select element Customized select element options in AngularJS how to display option as selected in select box in angularjs? Obtaining the selected option in a select element with AngularJS First selection of element not working in IE selected element in ng-options with array How to select first select option after filtering in Angular Display unlisted value in select with ng-options displaying a selected value with ng-options angularjs How to set a selected option of a dropdown list control using angular JS How to select first element in select list Angular JS? how to make the first option active in ng-select coming inside ng-repeat

<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
<select ng-model="selected" ng-init="a" >
<option  ng-repeat="a in ['CSE','ECE','CHEM','MME','CE']">{{a}}</option>
</select>
<p>{{selected}}</p>
</body>
</html>

Upvotes: 0

Views: 2395

Answers (1)

Prince John
Prince John

Reputation: 662

You need to assign selected in order for it to select the option of your choice. In your code, selected is null/undefined and therefore your first option won't be selected.

Here is how I usually solve this problem:

js

app.controller('MainCtrl', function($scope) {
  $scope.arr = ['CSE','ECE','CHEM','MME','CE'];
});

html

<body ng-controller="MainCtrl">
    <select ng-model="selected" ng-init="selected = arr[0]" >
    <option  ng-repeat="a in arr">{{a}}</option>
    </select>
    <p>{{selected}}</p>
</body>

In ng-init I assign selected to be the first element of the array, this will make this option be selected by default.

Upvotes: 0

Related Questions