<md-list> is the most important directive in angular material to represent the list of items. Multiple items 1 to n can be displayed by using this directive. User don't need to write frontend or html multiple times to display the list. so this is a container of multiple <md-list-item>. </md-list-item> is a directive which is used within <md-list> directive to represent an item in a single row or column.
How to implement List of angular material,Let's understand it by an example. Here, In js file an array is initialized with a detail array which holds name and emailId of the students. In html part,we are using <md-list> and <md-list-item> with ng-repeat directive to repeat the items of detail array and we will access properties name and emailId via Dot as you can see in given example.
Html part:
<md-list ng-app="myApp" ng-controller="appCtrl">
<md-subheader class="md-no-sticky">Passed Student List</md-subheader>
<div layout="row" flex="100">
<p flex="50">Name</p>
<p flex="50">EmailId</p>
</div>
<md-list-item ng-repeat="detail in details">
<div layout="row" flex="100">
<p flex="50"> {{ detail.name }} </p>
<p flex="50"> {{ detail.emailId }} </p>
</div>
<md-divider></md-divider>
</md-list-item>
</md-list>
Js part:
angular.module('myApp', ['ngMaterial'])
.controller('appCtrl', function($scope) {
$scope.details = [
{ name: 'abc', emailId: 'abc@gmail.com' },
{ name: 'xyz', emailId: 'xyz@gmail.com' },
{ name: 'pqr', emailId: 'pqr@gmail.com' },
{ name: 'rs', emailId: 'rs@gmail.com' }
];
}
Result:
0 Comment(s)