- 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 - List
The md-list, an Angular directive, is a container component that contains the md-list-item elements as children. The md-list-item directive is a container component for row items of md-list container. The CSS classes, md-2-line and md-3-line, can be added to md-list-item to increase the height of row with 22px and 40px respectively.
Example
The following example shows the use of md-list directive and also the uses of lists.
am_lists.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('listController', listController); function listController ($scope) { var self = this; self.allContacts = loadContacts(); self.contacts = [self.allContacts[0]]; function loadContacts() { var contacts = [ 'Roberto Karlos', 'Bob Crestor', 'Nigel Rick', 'Narayana Garner' ]; return contacts.map(function (c, index) { var cParts = c.split(' '); var contact = { name: c, email: cParts[0][0].toLowerCase() + '.' + cParts[1].toLowerCase() + '@example.com', image: 'http://lorempixel.com/50/50/people?' + index }; contact._lowername = contact.name.toLowerCase(); return contact; }); } } </script> </head> <body ng-app = "firstApplication"> <div id = "listContainer" ng-controller = "listController as ctrl" layout = "column" ng-cloak> <md-content> <md-list> <md-subheader class = "md-no-sticky">Contacts</md-subheader> <md-list-item class = "md-2-line contact-item" ng-repeat = "(index, contact) in ctrl.allContacts" ng-if = "ctrl.contacts.indexOf(contact) < 0"> <img ng-src = "{{contact.image}}" class = "md-avatar" alt = "{{contact.name}}" /> <div class = "md-list-item-text compact"> <h3>{{contact.name}}</h3> <p>{{contact.email}}</p> </div> <md-divider ng-if = "!$last"></md-divider> </md-list-item> </md-list> <md-list> <md-subheader class = "md-no-sticky">Contacts (With Insets)</md-subheader> <md-list-item class = "md-2-line contact-item" ng-repeat = "(index, contact) in ctrl.allContacts" ng-if = "ctrl.contacts.indexOf(contact) < 0"> <img ng-src = "{{contact.image}}" class = "md-avatar" alt = "{{contact.name}}" /> <div class = "md-list-item-text compact"> <h3>{{contact.name}}</h3> <p>{{contact.email}}</p> </div> <md-divider md-inset ng-if = "!$last"></md-divider> </md-list-item> </md-list> </md-content> </div> </body> </html>
Result
Verify the result.
angular_material_widgets.htm
Advertisements