Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • md-list in angular material

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.15k
    Comment on it

    <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>
                        <md-list-item ng-repeat="detail in details">
                            <div layout="row" flex="100">
                                <p flex="50"> {{ }} </p>
                                <p flex="50"> {{ detail.emailId }} </p>


    Js part:

    angular.module('myApp', ['ngMaterial'])
    .controller('appCtrl', function($scope) {
      $scope.details = [
        { name: 'abc', emailId: '' },
        { name: 'xyz', emailId: '' },
        { name: 'pqr', emailId: '' },
        { name: 'rs',  emailId: '' }


 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: