Question

我在angularjs材料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) {

    }])

我希望中心的保管箱列表的默认选项为"manual"。因此，默认情况下，文本Mode2将显示在保管箱列表中。

Answer 1

为了做得更好＆＃39;，在控制器中你应该

.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

Answer 2

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

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

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

});

<强>样本

＆＃13;

// Code goes here


var app = angular.module('app', ["ngMaterial"]);

app.controller('myCtrl', function($scope) {
  $scope.mode = 'manual'

});

＆＃13;

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

＆＃13;

Answer 3

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

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

在angularjs材质中设置下拉列表的默认值

3 个答案: