How to set default select value in AngularJS?

Question

I am totally new to Angular Js 1.0 and I am struggling in one of the simple code here. I wanted to show the default selected value in my dropdown. Below is the code I have used

<select id="ddlHeritage" class="form-control" columnname="HeritageIssues"
                            ng-change="riskCltr.showriskcomment()"
                            ng-focus-compliance="" ng-model-options="{'updateOn':'default blur', 'debounce':{'default': 250, 'blur':0}}" ng-model="McProMainCtrl.mcProEntry.McPro_Risk.HeritageIssues">
                        <option ng-repeat="item in (ValuerList = (McProMainCtrl.mcProEntry.McPro_DropDownData | orderBy:'Name' | filter:{GroupID:'120'} )) "
                                ng-selected="{{item.Value==McProMainCtrl.mcProEntry.McPro_Risk.HeritageIssues}}" value="{{::item.Value}}">
                            {{::item.Name}}
                        </option>
                    </select>

In the above code I am getting dropdown value from database(including the "--Select--" value) However, I have null values under the field McProMainCtrl.mcProEntry.McPro_Risk.HeritageIssues.

I wanted to select value --Select-- when McProMainCtrl.mcProEntry.McPro_Risk.HeritageIssues value is null. I am actually struggling as to how to accomplish it in angularjs

When I add the below line above Option it add two "Select"

<option value="null">--Select--</option>

Any help is appreciated.

https://stackoverflow.com/questions/35743472/how-to-set-dropdown-default-value-using-angularjs https://stackoverflow.com/questions/17815036/setting-default-value-in-select-drop-down-using-angularjs https://stackoverflow.com/questions/18380951/how-do-i-set-default-value-of-select-box-in-angularjs https://stackoverflow.com/questions/44889419/set-default-value-option-in-dropdown-angularjs — joy08, Mar 02 '20 at 11:22

score 0 · Answer 1 · answered Mar 02 '20 at 10:15

Try adding value="null" in your select element :

<select id="ddlHeritage" value="null" class="form-control" columnname="HeritageIssues"
                            ng-change="riskCltr.showriskcomment()"
                            ng-focus-compliance="" ng-model-options="{'updateOn':'default blur', 'debounce':{'default': 250, 'blur':0}}" ng-model="McProMainCtrl.mcProEntry.McPro_Risk.HeritageIssues">
                        <option ng-repeat="item in (ValuerList = (McProMainCtrl.mcProEntry.McPro_DropDownData | orderBy:'Name' | filter:{GroupID:'120'} )) "
                                ng-selected="{{item.Value==McProMainCtrl.mcProEntry.McPro_Risk.HeritageIssues}}" value="{{::item.Value}}">
                            {{::item.Name}}
                        </option>
                    </select>

Null won't, but whatever the value of your `` is, would work — Prakhar Londhe, Mar 02 '20 at 11:04

Suvra · Answer 2 · 2020-03-02T11:50:40.637

This is similar things I have solve in my project. No need any option

var app = angular.module('angularjs-starter', []);

app.controller("unitController", function ($scope) {

$scope.units = [{name: "Crore", value: "Crore"},
        {name: "Lakh", value: "Lakh"},
        {name: "INR", value: "INR"},
        {name: "--------", value: "", separator: true},
        {name: "Million", value: "Million"}];
        
        
$scope.financialDataUnit = "Crore";
});

<!DOCTYPE html>
<html ng-app="angularjs-starter">
  <head>
    <link rel="stylesheet" href="style.css">
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller='unitController'>
    <select ng-model="financialDataUnit" 
      ng-options="unit.value as unit.name disable when unit.separator for unit in units">
    </select>
  </body>
</html>

How to set default select value in AngularJS?

2 Answers2