Vật liệu góc - Công tắc

Các md-switch, một chỉ thị Angular, được sử dụng để hiển thị một công tắc.

Thuộc tính

Bảng sau liệt kê các tham số và mô tả về các thuộc tính khác nhau của md-switch.

Sr.No Mô tả về Thông Số
1

* ng-model

Biểu thức góc có thể gán cho data-bind to.

2

name

Tên thuộc tính của biểu mẫu mà kiểm soát được xuất bản.

3

ng-true-value

Giá trị mà biểu thức sẽ được đặt khi được chọn.

4

ng-false-value

Giá trị mà biểu thức sẽ được đặt khi không được chọn.

5

ng-change

Biểu thức Angular được thực thi khi đầu vào thay đổi do tương tác của người dùng với phần tử đầu vào.

6

ng-disabled

En / Disable dựa trên biểu thức.

7

md-no-ink

Việc sử dụng thuộc tính cho biết việc sử dụng hiệu ứng mực gợn.

số 8

aria-label

Điều này xuất bản nhãn nút được trình đọc màn hình sử dụng cho khả năng truy cập. Điều này mặc định là văn bản của công tắc.

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng md-vuốt- * và cả việc sử dụng các thành phần vuốt.

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>

Kết quả

Xác minh kết quả.