Winkelmaterial - Schalter

Das md-switch, eine Angular-Direktive, wird verwendet, um einen Schalter anzuzeigen.

Attribute

In der folgenden Tabelle sind die Parameter und die Beschreibung der verschiedenen Attribute von aufgeführt md-switch.

Sr.Nr. Parameter & Beschreibung
1

* ng-model

Der zuweisbare Winkelausdruck, an den Daten gebunden werden sollen.

2

name

Der Eigenschaftsname des Formulars, unter dem das Steuerelement veröffentlicht wird.

3

ng-true-value

Der Wert, auf den der Ausdruck bei Auswahl festgelegt werden soll.

4

ng-false-value

Der Wert, auf den der Ausdruck gesetzt werden soll, wenn er nicht ausgewählt ist.

5

ng-change

Der Winkelausdruck, der ausgeführt werden soll, wenn sich die Eingabe aufgrund der Benutzerinteraktion mit dem Eingabeelement ändert.

6

ng-disabled

Aktivieren / Deaktivieren basierend auf dem Ausdruck.

7

md-no-ink

Die Verwendung von Attributen gibt die Verwendung von Welligkeitstinteneffekten an.

8

aria-label

Dadurch wird die Tastenbezeichnung veröffentlicht, die von den Screenreadern für die Barrierefreiheit verwendet wird. Dies ist standardmäßig der Text des Schalters.

Beispiel

Das folgende Beispiel zeigt die Verwendung von md-swipe- * sowie die Verwendung von Swipe-Komponenten.

am_switches.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('switchController', switchController);

         function switchController ($scope) {
            $scope.data = {
               switch1: true,
               switch2: false,
               switch3: false,
               switch4: true,
               switch5: true,
               switch6: false
            };
               
            $scope.message = 'false';
            $scope.onChange = function(state) {
               $scope.message = state;
            };
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "switchContainer" ng-controller = "switchController as ctrl"
         layout = "column" ng-cloak>
         <md-switch ng-model = "data.switch1" aria-label = "Switch 1">
            Switch 1: {{ data.switch1 }}
         </md-switch>
         
         <md-switch ng-model = "data.switch2" aria-label = "Switch 2"
            ng-true-value = "'true'" ng-false-value = "'false'" class = "md-warn">
            Switch 2 (md-warn): {{ data.switch2 }}
         </md-switch>
         
         <md-switch ng-disabled = "true" aria-label = "Disabled switch"
            ng-model = "disabledModel">
            Switch 3 (Disabled)
         </md-switch>
         
         <md-switch ng-disabled = "true" aria-label = "Disabled active switch"
            ng-model = "data.switch4">
            Switch 4 (Disabled, Active)
         </md-switch>
         
         <md-switch class = "md-primary" md-no-ink aria-label = "Switch No Ink"
            ng-model = "data.switch5">
            Switch 5 (md-primary): No Ink
         </md-switch>
         
         <md-switch ng-model = "data.switch6" aria-label = "Switch 6"
            ng-change = "onChange(data.switch6)">
            Switch 6 : {{ message }}
         </md-switch>    
      </div>
   </body>
</html>

Ergebnis

Überprüfen Sie das Ergebnis.