How to set default value to dropdownlist in angularjs

Question

hi I am developing web application in angularjs. I have one dropdownlistbox with some values. Below is my dropdownlistbox html code.

<select id="calc-year" ng-model="period" name="period" required range-numberddwn="rangeddwn">
   <option value="" label="{{ 'Month' | translate }}">{{ 'Month' | translate }}</option>
   <option ng-repeat="x in cal" value="{{x.Period}}">{{x.Period}} {{'Months' | translate}}</option>
</select>

Below is my code to assign values to dropdownlistbox.

$scope.cal = response.data.data.Period;

Below is the screenshot of data i am assigning to cal.

If i want to set 4th value by default then i tried as below.

$scope.period = $scope.cal[4]; and $scope.period = response.data.data.Period[4];

Whenever i set as above i blank value will come in dropdownlist

Above both options did not work out for me. May i know what is the solution to set default value? Any help would be appreciated. Thank you.

then you have to use ng-options ,look this :docs.angularjs.org/api/ng/directive/ngOptions — chirag satapara
– chirag satapara, Commented Sep 27, 2017 at 4:36
Possible duplicate of how to set dropdown default value using angularjs — redanesc
– redanesc, Commented Sep 27, 2017 at 4:38
The problem can be caused by fact, that you mixed option ng-repeat and separate option value=, try to merge them into the one option ng-repeat — Slava Utesinov
– Slava Utesinov, Commented Sep 27, 2017 at 5:40

Vivek Atri · Accepted Answer · 2017-09-27 05:46:04Z

1

In your controller, set a value in scope variable which you want to be the default value for your drop down. Make sure, cal variable exist in scope. Then try something like this,

$scope.calValue = $scope.cal[3]; //This will be Default cal value

Then in your view(html), use ng-options something like this,

<select ng-model="calValue" ng-options="x.Period for x in cal"></select>

Now, calValue will be the default value in drop down, and if you select any other option from dropdown, then that will become the value of calValue.

Cheers !!

answered Sep 27, 2017 at 5:46

Vivek Atri

562 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Niranjan Godbole Over a year ago

You saved my day. Thanks

Niranjan Godbole Over a year ago

also i want to know instead of setting using index like $scope.cal[3] how can i set using value?

Vivek Atri Over a year ago

Iterate over the array/list (using loop), compare your required value in array element`s values (using if-else), and as per the outcome of comparison assign that array element to default value. You can write this code in controller itself.

Sajeetharan · Accepted Answer · 2017-09-27 04:37:11Z

1

If you want to set the 4th value index should be 3

 $scope.period = $scope.cal[3]; 
 $scope.period = response.data.data.Period[3];

answered Sep 27, 2017 at 4:37

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

1 Comment

Niranjan Godbole Over a year ago

Thanks but i just gave example but problem is i am not able to set any of the values. Whenever i set $scope.period = $scope.cal[3]; i get blank in dropdownlistbox.

Collectives™ on Stack Overflow

How to set default value to dropdownlist in angularjs

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related