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.

stackoverflow.com/questions/35743472/… stackoverflow.com/questions/17815036/… stackoverflow.com/questions/18380951/… stackoverflow.com/questions/44889419/… — joy08
– joy08, Commented Mar 2, 2020 at 11:22

Prakhar Londhe · Accepted Answer · 2020-03-02 10:15:31Z

0

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>

answered Mar 2, 2020 at 10:15

Prakhar Londhe

1,4711 gold badge13 silver badges27 bronze badges

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

1 Comment

Prakhar Londhe Over a year ago

Null won't, but whatever the value of your <option>---Select--- </option> is, would work

Suvra · Accepted Answer · 2020-03-02 11:50:40Z

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>

Collectives™ on Stack Overflow

How to set default select value in AngularJS?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related