在angularjs材料中设置下拉列表的默认值答案

【问题标题】：Set default value of dropdown list in angularjs materials在angularjs材料中设置下拉列表的默认值
【发布时间】：2017-04-28 03:39:25
【问题描述】：

我在 angularjs materials v1 中完成了这个简单的网页，如下所示；

这里是html代码；

<div ng-controller="room_controller" class="md-padding" ng-cloak layout="column">
    <md-card>
        <md-card-title>
            <md-card-title-text>
                <span class="md-headline">Room settings</span>
            </md-card-title-text>
        </md-card-title>
        <md-card-content>
            <div layout="row" layout-align="space-between center">
                <span>Room</span>
                <md-select ng-model="mode" placeholder="Mode1" class="md-no-underline">
                    <md-option value="auto">Mode1</md-option>
                    <md-option value="manual">Mode2</md-option>
                </md-select>
                <md-select ng-model="channel_number" placeholder="1" class="md-no-underline">
                    <md-option value="1">1</md-option>
                    <md-option value="2">2</md-option>
                    <md-option value="3">3</md-option>
                </md-select>
            </div>
        </md-card-content>
    <md-card>
</div>

angularjs控制器代码如下；

.controller('room_controller', ['$scope', 
    function ($scope) {

    }])

我希望中心的 Dropbox 列表的默认选项为 "manual"。因此，文本Mode2会默认出现在Dropbox列表中。

【问题讨论】：

$scope.mode = 'manual'
仅此而已？很简单？让我试试看。我觉得自己很愚蠢。

标签： html css angularjs angular-material

【解决方案1】：

要做到“更好”，在你的控制器中你应该有

.controller('room_controller', ['$scope', function ($scope) {
    $scope.modes = [
        { val: 'auto', label: 'Mode 1' },
        { val: 'manual', label: 'Mode 2' }
    ]

    // Selected value
    $scope.selectedMode = { val: 'manual', label: 'Mode 2' };
}])

并像这样呈现您的 html：

<md-select ng-model="selectedMode" ng-model-options="{trackBy: '$value.val'}">
  <md-option ng-value="mode" ng-repeat="mode in modes">{{ mode.label }}</md-option>
</md-select>

这是一个fiddle

【讨论】：

【解决方案2】：

您需要在控制器中设置ng-model并将mode设置为手动

var app = angular.module('app', ["ngMaterial"]);

app.controller('myCtrl', function($scope) {
  $scope.mode = 'manual'

});

演示

// Code goes here


var app = angular.module('app', ["ngMaterial"]);

app.controller('myCtrl', function($scope) {
  $scope.mode = 'manual'

});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <title>Test angular md-select with material 0.11.0</title>
  <link rel="stylesheet" href="style.css" />
  <link data-require="angular-material@0.11.0" data-semver="0.11.0" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css" />


  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

  <script data-require="angular.js@*" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

  <script data-require="angular-material@0.11.0" data-semver="0.11.0" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>

  <script data-require="angular-animate@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
  <script data-require="angular-aria@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="myCtrl">
  <div layout="row">
    <div layout="row" layout-align="space-between center">
      <span>Room</span>
      <md-select ng-model="mode" placeholder="Mode1" class="md-no-underline">
        <md-option value="auto">Mode1</md-option>
        <md-option value="manual">Mode2</md-option>
      </md-select>
      <md-select ng-model="channel_number" placeholder="1" class="md-no-underline">
        <md-option value="1">1</md-option>
        <md-option value="2">2</md-option>
        <md-option value="3">3</md-option>
      </md-select>
    </div>


  </div>
  <div layout="row">
    return value: {{mode}}
  </div>
</body>

</html>

【讨论】：

【解决方案3】：

您只需要在 angularjs 控制器中添加一行 $scope.mode = 'manual'。

.controller('room_controller', ['$scope', 
    function ($scope) {
        $scope.mode = 'manual'
    }])

【讨论】：