hongbojing
5/19/2016 - 7:49 PM

From http://www.tutorialspoint.com/angular_material/angular_material_quick_guide.htm

<html lang="en" >
   <head>
      <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src="http://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>