- 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 - Selects
The md-select, an Angular directive is used to show Select box, bounded by ng-model.
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 The model! |
2 | multiple Whether it's multiple. |
3 | md-on-close Expression to be evaluated when the select is closed. |
4 | placeholder Placeholder hint text. |
5 | baria-label
Optional label for accessibility. Only necessary if no placeholder or explicit label is present. |
6 | md-container-class Class list to get applied to the .md-select-menu-container element (for custom styling). |
Example
The following example showcases the use of md-select
showcase uses of select box.
am_selects.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('selectController', selectController); function selectController ($scope) { $scope.users = [ { id: 1, name: 'Mahesh' }, { id: 2, name: 'Ramesh' }, { id: 3, name: 'Sohan' } ]; $scope.selectedUser = { id: 2, name: 'Ramesh' }; $scope.drinks = [ { category: 'hard', name: 'Beer' }, { category: 'hard', name: 'Rum' }, { category: 'hard', name: 'Vodka' }, { category: 'hard', name: 'Whiski' }, { category: 'soft', name: 'Coke' }, { category: 'soft', name: 'Pepsi' }, { category: 'soft', name: 'Pulp Maid' }, { category: 'soft', name: 'Real Juice' } ]; } </script> </head> <body ng-app = "firstApplication"> <div id = "selectContainer" ng-controller = "selectController as ctrl" layout = "row" ng-cloak> <md-input-container> <label>User</label> <md-select ng-model = "selectedUser"> <md-option ng-value = "user" ng-repeat = "user in users">{{ user.name }}</md-option> </md-select> </md-input-container> <md-input-container> <label>Drinks</label> <md-select ng-model = "drink"> <md-optgroup label = "Hard Drinks"> <md-option ng-value = "drink.name" ng-repeat = "drink in drinks | filter: {category: 'hard' }"> {{drink.name}}</md-option> </md-optgroup> <md-optgroup label = "Soft Drinks"> <md-option ng-value = "drink.name" ng-repeat = "drink in drinks | filter: {category: 'soft' }"> {{drink.name}}</md-option> </md-optgroup> </md-select> </md-input-container> </div> </body> </html>
Result
Verify the result.
angular_material_widgets.htm
Advertisements