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

Question

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

Answer 1

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

$scope.myCtrl.param1 = 'A';

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

Answer 2

您需要使用ng-selected并基于键，您可以保留选定的项目或不选择项目

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

Answer 3

以下说明了人们可以这样做的方式：

选项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;
});