CODEWITHSUNDEEP
htmlcssangularjsangular-material
guagay_wk
guagay_wk

Reputation: 28088

Set default value of dropdown list in angularjs materials

I have this simple webpage done in angularjs materials v1 as shown below;

enter image description here

Here is the 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>

The angularjs controller code is as follows;

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

    }])

I want the default option of the dropbox list in the centre to be "manual". As a result, the text Mode2 will appear at the dropbox list by default.

Upvotes: 2

Views: 1151

Answers (3)

Razvan B.
Razvan B.

Reputation: 6771

To do it 'better', in your controller you should have 

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

and render your html like this:

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

Here is a fiddle

Upvotes: 2

guagay_wk
guagay_wk

Reputation: 28088

You only need to add one line $scope.mode = 'manual' to your angularjs controller.

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

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222722

You need to set the ng-model in controller and set the mode as manual

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="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="[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>

Upvotes: 1

Related Questions