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