如何在 AngularJS 中设置默认选择值？答案

【问题标题】：How to set default select value in AngularJS?如何在 AngularJS 中设置默认选择值？
【发布时间】：2020-06-14 14:41:36
【问题描述】：

我对 Angular Js 1.0 完全陌生，我在这里的一个简单代码中苦苦挣扎。我想在我的下拉列表中显示默认选择的值。下面是我用过的代码

<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>

在上面的代码中，我从数据库中获取下拉值（包括“--Select--”值）但是，我在 McProMainCtrl.mcProEntry.McPro_Risk.HeritageIssues 字段下有空值。

当 McProMainCtrl.mcProEntry.McPro_Risk.HeritageIssues 值为空时，我想选择值 --Select--。我实际上正在为如何在 angularjs 中完成它而苦苦挣扎

当我在选项上方添加以下行时，它会添加两个“选择”

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

感谢任何帮助。

【问题讨论】：

stackoverflow.com/questions/35743472/…stackoverflow.com/questions/17815036/…stackoverflow.com/questions/18380951/…stackoverflow.com/questions/44889419/…

标签： angularjs

【解决方案1】：

这是我在项目中解决的类似问题。不需要任何选项

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>

【讨论】：

【解决方案2】：

尝试在您的选择元素中添加value="null"：

<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 不会，但无论您的 <option>---Select--- </option> 的值是多少，都可以使用