如何从 AngularJS 的下拉框中设置选择默认值

How can I set a select default value from a drop-down box in AngularJS?

本文关键字：设置 选择 默认值 AngularJS      更新时间：2023-09-26

我的HTML文件中有以下Angular代码。我有一个下拉框，其中包含两个固定选项：A和B。用户必须选择A或B 。它不能留空。我希望默认选择A.我该怎么做？

以下代码从一个空的下拉框开始。我不想这样。我希望A被预先选中。

<div ng-controller="MyController as myCtrl">
  <select ng-model="myCtrl.param1">
    <option value="a" selected>A</option>
    <option value="b">B</option>
  </select><br/>
  <button ng-click="myCtrl.submit()">submit</button>
</div>

您可以在控制器中声明一个变量，如下所示： 

$scope.myCtrl.param1 = 'A';

工作小提琴：https://jsfiddle.net/n9tL7cdr/2/

下面说明了可以做到这一点的方法：

选项 1：(通过添加ng-selected="true"(

.HTML： 

<div ng-app="app" ng-controller="MyController as myCtrl">
    <select ng-model="myCtrl.param1">
        <option value="a" ng-selected="true">A</option>
        <option value="b">B</option>
    </select><br />
    <button ng-click="myCtrl.submit()">submit</button>
</div>

.JS：

var app = angular.module('app', []);
app.controller('MyController', function ($scope) {
    var myCtrl = this;
    myCtrl.submit = function () {
       /*..*/
    }
    $scope = myCtrl;
});

选项 2：(通过在controller中设置variable(

.HTML：

<div ng-app="app" ng-controller="MyController as myCtrl">
    <select ng-model="myCtrl.param1">
        <option value="a">A</option>
        <option value="b">B</option>
    </select><br />
    <button ng-click="myCtrl.submit()">submit</button>
</div>

.JS：

var app = angular.module('app', []);
app.controller('MyController', function ($scope) {
    var myCtrl = this;
    myCtrl.submit = function () {
    }
    myCtrl.param1 = "a";
    $scope = myCtrl;
});

如果您不想预先选择任何标签，但显示标签，则 ->

选项 3：(仅显示"选择"标签 - 在这种情况下没有预选(

.HTML：

<div ng-app="app" ng-controller="MyController as myCtrl">
    <select ng-model="myCtrl.param1">
        <option value="">Select</option>
        <option value="a">A</option>
        <option value="b">B</option>
    </select><br />
    <button ng-click="myCtrl.submit()">submit</button>
</div>

.JS：

var app = angular.module('app', []);
app.controller('MyController', function ($scope) {
    var myCtrl = this;
    myCtrl.submit = function () {
    }
    $scope = myCtrl;
});

您需要使用 ng 选择并根据键保留选中或未选择的项目，例如

<md-select ng-model="sms.from" ng-change="getSelectedValue(sms.from, 'from')">
  <md-option ng-repeat="(i,item) in fromNumber" ng-value="item" ng-selected="i == 0 ? true:false">{{ item }}</md-option>
</md-select>

相关文章：