- Angular Material Tutorial
- Angular Material - Home
- Angular Material - Overview
- Environment Setup
- Angular Material - Autocomplete
- Angular Material - Bottom Sheet
- Angular Material - Cards
- Angular Material - Widgets
- Angular Material - Layouts
- Angular Material - Inputs
- Angular Material - Icons
- Angular Material - Grids
- Angular Material - SideNav
- Angular Material - Fab Speed Dial
- Angular Material - Subheaders
- Angular Material - Swipe
- Angular Material - Switches
- Angular Material - Themes
- Angular Material - Toasts
- Angular Material - Typography
- Angular Material - Virtual Repeat
- Angular Material - WhiteFrame
- Angular Material Useful Resources
- Angular Material - Quick Guide
- Angular Material - Useful Resources
- Angular Material - Discussion
Angular Material - CheckBoxes
The md-checkbox, an Angular Directive, is used as a checkbox control.
Attributes
The following table lists down the parameters and description of the different attributes of md-checkbox.
Sr.No | Parameter & Description |
---|---|
1 | * ng-model Assignable angular expression to data-bind to. |
2 | name The property name of the form under which the control is published. |
3 | ng-true-value The value to which the expression should be set when selected. |
4 | ng-false-value The value to which the expression should be set when not selected. |
5 | ng-change Angular expression to be executed when input changes due to user interaction with the input element. |
6 | md-no-ink Use of attribute indicates the use of ripple ink effects. |
7 | aria-label Adds label to checkbox for accessibility. Defaults to checkbox's text. If no default text is found, a warning will be logged. |
Example
The following example shows the use of the md-checkbox directive and also the use of angular checkboxes.
am_checkboxes.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> <script language = "javascript"> angular .module('firstApplication', ['ngMaterial']) .controller('checkBoxController', checkBoxController); function checkBoxController ($scope) { } </script> </head> <body ng-app = "firstApplication"> <md-checkbox ng-model = "isChecked" aria-label = "Married"> Married </md-checkbox> <md-checkbox md-no-ink ng-model = "hasInk" aria-label = "No Ink Effects"> Single </md-checkbox> <md-checkbox ng-disabled = "true" ng-model = "isDisabled" aria-label = "Disabled"> Don't know (Disabled) </md-checkbox> </body> </html>
Result
Verify the result.