Angular Material Select
Angular Material Select: <md-select> is used to create select box in Angular Material. This component is used within the <md-input-container> or it can be used standalone by using the class <md-no-underline>. Here in this tutorial we are going to explain how you can use <md-select> to create select dropdown. –
Angular Material Select Box Dropdown List Example
Let us create first select box to understand the how it works-
Angular Material Select Example:
<md-content layout-padding>
<md-select ng-model="actionModel">
<md-option><em>None</em></md-option>
<md-option ng-value="1">Enable</md-option>
<md-option ng-value="2">Disable<md-option>
<md-option ng-value="3">Delete</md-option>
</md-select>
</md-content>
|
| Try It On → |
|
|
In the above example we have created very basic select box using md-select and md-option directive. However you can use this for static select dropdown list where you don’t need Dynamic options.
If you run the above example it will produce output something like this –
Options Available
Following Options are available which you can use as per your requirement-
- * ng-model(expression):The model to init.
multiple(boolean):
This is used to enable mulselection.
md-on-close(expression):
Expression is evaluated when close event is fired.
md-on-open(expression):
Expression to be evaluated when opening the select. Will hide the select options and show a spinner until the evaluated promise resolves.
md-selected-text(expression):
This Expression is evaluated and will return a string as a placeholder when closed.
placeholder(string):
Used to add placeholder.
md-no-asterisk(boolean):
Asterisk will not be appended to the floating label if it is set to true.
aria-label(string):
Label for accessibility.
md-container-class(string):
If you want custom styling then you can use this to apply to the class to .md-select-menu-container element.
Learn More About Select Box(DropDown)
Let us have some more example and demo about the Angular Material Select Dropdown Menu.
Dynamic Select Dropdown Using Object
It is very simple to create dynamic Select Dropdown Box. Here is an example –
Angular Material Select Example:
<html lang="en" >
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<script language="javascript">
angular
.module('myApp', ['ngMaterial'])
.controller('MyController', function ($scope, $mdDialog) {
$scope.users = [
{ id: 1, name: 'Yeli' },
{ id: 2, name: 'John' },
{ id: 3, name: 'James' }
];
$scope.usersModel = { id: 1, name: 'Yeli' }; // This is used to set default Selected
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController as ctrl" ng-cloak="" >
<md-content layout-padding>
<md-select ng-model="usersModel">
<md-option ng-value="user" ng-repeat="user in users">{{ user.name }}</md-option>
</md-select>
</md-content>
</div>
</body>
</html>
|
Thus you can create any dynamic dropdown list, You can also fetch data from database and format them to display in dropdown list.
Angular Material Multiselect DropDown List | Multi Select Box
Sometimes we need multiselect dropdown menu, Angular Materiala provides (multiple) attribute which enables you to select multiple options from the list. Here is an example of multiple select dropdown example-
Angular Material MultiSelect Example:
<md-select ng-model="usersModel" multiple>
<md-option ng-value="user" ng-repeat="user in users">{{ user.name }}</md-option>
</md-select>
|
In the above example we have added attribute multiple which enables us to select multiple options from dropdown list
If you run the above example it will produce the output something like this –
Advertisements
