Setze den Standardwert der Dropdown-Liste in angularjs Materialien

Ich habe diese einfache Webseite in angularjs Materialien v1 wie unten gezeigt getan;Setze den Standardwert der Dropdown-Liste in angularjs Materialien

Hier ist der HTML-Code;

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

Der angularjs Controller-Code ist wie folgt;

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

    }])

Ich mag die Standardoption der Dropbox-Liste in der Mitte "manual" sein. Daher wird der Text Mode2 standardmäßig in der Dropbox-Liste angezeigt.

Quelle

2016-12-13 user781486

'$ scope.mode = 'manual'' –

Nur das nur? So einfach? Lass es mich ausprobieren. Ich fühle mich wirklich dumm. – user781486

Sie benötigen die ng-model in der Steuerung zu setzen und die mode als manuelle

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

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

});

DEMO

// 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="[email protected]" 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="[email protected]*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
 

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

 
    <script data-require="[email protected]" 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="[email protected]" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-animate.js"></script> 
 
    <script data-require="[email protected]" 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>

Quelle

2016-12-13 06:42:45 Sajeetharan

Um es zu machen 'besser' gesetzt, in deinem Controller sollten Sie

.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' }; 
}])

haben und Ihre html wie folgt machen:

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

Hier ist ein fiddle

Quelle

2016-12-13 06:46:56

Sie benötigen nur eine Zeile $scope.mode = 'manual' zu Ihrem AngularJS Controller hinzuzufügen.

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

Quelle

2016-12-13 06:46:57 user781486

Setze den Standardwert der Dropdown-Liste in angularjs Materialien

Antwort

Verwandte Themen