- 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 - Radio Buttons
The md-radio-group and md-radio-button Angular directives are used to show radio buttons in the applcation. The md-radio-group is the grouping container for md-radio-button elements.
Attributes - md-radio-group
The following table lists out the parameters and description of the different attributes of md-radio-group.
Sr.No | Parameter & Description |
---|---|
1 | * ng-model Assignable angular expression to data-bind to. |
2 | md-no-ink Use of attribute indicates flag to disable ink ripple effects. |
Attributes - md-radio-button
Sr.No | Parameter & Description |
---|---|
1 | * ng-model Assignable angular expression to data-bind to. |
2 | * ngValue Angular expression which sets the value to which the expression should be set when selected. |
3 | * value The value to which the expression should be set when selected. |
4 | ngChange Angular expression to be executed when input changes due to user interaction with the input element. |
5 | name Property name of the form under which the control is published. |
6 | aria-label Adds label to radio button for accessibility. This defaults to radio button's text. If no text content is available, a warning will be logged. |
Example
The following example shows the use of md-radio-group and md-radio-button directives and also the uses of radio buttons.
am_radiobuttons.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('radioButtonsController', radioButtonsController); function radioButtonsController ($scope) { $scope.radioData = [ { label: 'Apple', value: 'Apple' }, { label: 'Banana', value: 'Banana' }, { label: 'Mango', value: 'Mango', isDisabled: true }, { label: 'Orange', value: 'Orange' } ]; $scope.group = 'Banana'; } </script> </head> <body ng-app = "firstApplication"> <div id = "radioButtonsContainer" ng-controller = "radioButtonsController as ctrl" layout = "column" ng-cloak> <p>Selected Value: <span>{{ group }}</span> </p> <md-radio-group ng-model = "group" class = "md-primary"> <md-radio-button ng-repeat = "d in radioData" ng-value = "d.value" ng-disabled = " d.isDisabled " ng-class = "{'md-align-top-left': $index==1}" > {{ d.label }}<br/> </md-radio-button> </md-radio-group> </div> </body> </html>
Result
Verify the result.