html - 在angularjs Material 中设置下拉列表的默认值

Question

我在 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 代码如下；

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

    }])

我希望中心下拉列表的默认选项是“manual”。因此，文本 Mode2 将默认出现在保管箱列表中。

Answer 1

为了“做得更好”，在你的 Controller 中你应该有

.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