MD-переключатель , угловая директива, используется для отображения переключателя.
Атрибуты
В следующей таблице перечислены параметры и описание различных атрибутов md-switch .
| Sr.No | Параметр и описание |
|---|---|
| 1 |
* нг-модель Назначаемое угловое выражение для привязки к данным. |
| 2 |
название Имя свойства формы, в которой публикуется элемент управления. |
| 3 |
нг-истинное значение Значение, на которое должно быть установлено выражение при выборе. |
| 4 |
нг-ложное значение Значение, на которое должно быть установлено выражение, если оно не выбрано. |
| 5 |
нг-изменения Угловое выражение, которое должно выполняться при изменении ввода из-за взаимодействия пользователя с элементом ввода. |
| 6 |
нг-инвалидов En / Отключить на основе выражения. |
| 7 |
не мкр-не-чернил Использование атрибута указывает на использование эффектов пульсации чернил. |
| 8 |
ария-этикетка Это публикует метку кнопки, используемую программами чтения с экрана для доступности. По умолчанию это текст переключателя. |
* нг-модель
Назначаемое угловое выражение для привязки к данным.
название
Имя свойства формы, в которой публикуется элемент управления.
нг-истинное значение
Значение, на которое должно быть установлено выражение при выборе.
нг-ложное значение
Значение, на которое должно быть установлено выражение, если оно не выбрано.
нг-изменения
Угловое выражение, которое должно выполняться при изменении ввода из-за взаимодействия пользователя с элементом ввода.
нг-инвалидов
En / Отключить на основе выражения.
не мкр-не-чернил
Использование атрибута указывает на использование эффектов пульсации чернил.
ария-этикетка
Это публикует метку кнопки, используемую программами чтения с экрана для доступности. По умолчанию это текст переключателя.
пример
В следующем примере показано использование md-swipe- *, а также использование компонентов смахивания.
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>
Результат
Проверьте результат.