md-switch ,Angular指令,用于显示开关.
下表列出了 md-switch 的不同属性的参数和描述.
Sr.No | 参数&说明 |
---|---|
1 | * ng-model 数据绑定的可赋值角度表达式. |
2 | 名称 该物业发布控件的表单名称. |
3 | ng-true-value 选择时表达式应设置的值. |
4 | ng -false-value 未选中时表达式应设置的值. |
5 | ng-change 由于用户与输入元素的交互而导致输入发生变化时要执行的Angular表达式. |
6 | ng-disabled 根据表达式启用/禁用. |
7 | md-no-墨水 使用属性表示使用了涟漪墨水效果. |
8 | aria-label 这发布屏幕阅读器用于访问的按钮标签.这默认为开关的文本. |
以下示例显示了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>
验证结果.