Angular Material Widgets - Radio Buttons - Angular Material

« Previous Topics
Angular Material Widgets - Progress Bars
Angular Material Widgets - Menu Bar
Angular Material Widgets - Menu

Next Topics »
Angular Material Widgets - Selects
Angular Material Widgets - Fab Toolbars
Angular Material Widgets - Sliders

Attributes - md-radio-group

S.N.	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

S.N.	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. Defaults to radio button's text. If no text content is available, a warning will be logged.

Example

The following example showcases the use of md-radio-group and md-radio-button directives to showcase 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

Confirm the result.

« Previous Topics
Angular Material Widgets - Progress Bars
Angular Material Widgets - Menu Bar
Angular Material Widgets - Menu

Next Topics »
Angular Material Widgets - Selects
Angular Material Widgets - Fab Toolbars
Angular Material Widgets - Sliders

Angular Material Related Tutorials
PHP Tutorial	Ext JS Tutorial
Django Tutorial	Angular 2 Tutorial
Phonegap Tutorial	MongoDB Tutorial

Angular Material Related Interview Questions
PHP Interview Questions	Angular JS Interview Questions
Ext JS Interview Questions	Django Interview Questions
Java Abstraction Interview Questions	Angular 2 Interview Questions
Phonegap Interview Questions	MongoDB Interview Questions
Angular 5 Interview Questions	Angular 4 Interview Questions
Angular 6 Interview Questions	Angular 7 Interview Questions

Angular Material Related Practice Tests
PHP Practice Tests	Angular JS Practice Tests
Ext JS Practice Tests	Django Practice Tests
Phonegap Practice Tests	MongoDB Practice Tests

Angular Material Widgets - Radio Buttons - Angular Material

Attributes - md-radio-group

Attributes - md-radio-button

Example

Result

Angular Material Related Tutorials

Angular Material Related Interview Questions

Angular Material Related Practice Tests

Skills by Location

Jobs By Companies

State Govt Jobs

Bank Jobs

Defence Jobs

PSC

SSC Jobs

Railway Jobs

Latest walkins

Walkins by Skill

Walkins by location

Walkins by Company

POPULAR COURSES