angular-material-npfixed/src/components/list/demoListControls/index.html

The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M

<md-list ng-controller="ListCtrl" ng-cloak>

  <md-subheader class="md-no-sticky">Single Action Checkboxes</md-subheader>
  <md-list-item ng-repeat="topping in toppings">
    <p> {{ topping.name }} </p>
    <md-checkbox class="md-secondary" ng-model="topping.wanted"></md-checkbox>
  </md-list-item>

  <md-divider></md-divider>

  <md-subheader class="md-no-sticky">Secondary Buttons</md-subheader>
  <md-list-item class="secondary-button-padding">
    <p>Clicking the button to the right will fire the secondary action</p>
    <md-button class="md-secondary" ng-click="doSecondaryAction($event)">More Info</md-button>
  </md-list-item>
  <md-list-item class="secondary-button-padding" ng-click="doPrimaryAction($event)">
    <p>Click anywhere to fire the primary action, or the button to fire the secondary</p>
    <md-button class="md-secondary" ng-click="doSecondaryAction($event)">More Info</md-button>
  </md-list-item>

  <md-divider></md-divider>

  <md-subheader class="md-no-sticky">Secondary Menus</md-subheader>
  <md-list-item>
    <p>Click anywhere to fire the secondary action</p>

    <md-menu class="md-secondary">
      <md-button class="md-icon-button">
        <md-icon md-svg-icon="communication:message"></md-icon>
      </md-button>
      <md-menu-content width="4">
        <md-menu-item>
          <md-button>
            Redial
          </md-button>
        </md-menu-item>
        <md-menu-item>
          <md-button>
            Check voicemail
          </md-button>
        </md-menu-item>
        <md-menu-divider></md-menu-divider>
        <md-menu-item>
          <md-button>
            Notifications
          </md-button>
        </md-menu-item>
      </md-menu-content>
    </md-menu>

  </md-list-item>

  <md-divider></md-divider>

  <md-subheader class="md-no-sticky">Clickable Items with Secondary Controls</md-subheader>
  <md-list-item ng-click="navigateTo(setting.extraScreen, $event)" ng-repeat="setting in settings">
    <md-icon md-svg-icon="{{setting.icon}}"></md-icon>
    <p> {{ setting.name }} </p>
    <md-switch class="md-secondary" ng-model="setting.enabled"></md-switch>
  </md-list-item>
  <md-list-item ng-click="navigateTo('data usage', $event)">
    <md-icon md-svg-icon="cached"></md-icon>
    <p>Data Usage</p>
  </md-list-item>

  <md-divider></md-divider>

  <md-subheader class="md-no-sticky">Checkbox with Secondary Action</md-subheader>
  <md-list-item ng-repeat="message in messages">
    <md-checkbox ng-model="message.selected"></md-checkbox>
    <p>{{message.title}}</p>
    <md-icon class="md-secondary" ng-click="doSecondaryAction($event)" aria-label="Chat" md-svg-icon="communication:message"></md-icon>
  </md-list-item>

  <md-divider></md-divider>

  <md-subheader class="md-no-sticky">Avatar with Secondary Action Icon</md-subheader>
  <md-list-item ng-repeat="person in people" ng-click="goToPerson(person.name, $event)" class="noright">
    <img alt="{{ person.name }}" ng-src="{{ person.img }}" class="md-avatar" />
    <p>{{ person.name }}</p>
    <md-checkbox class="md-secondary" ng-model="person.selected"></md-checkbox>
    <md-icon md-svg-icon="communication:email"  ng-click="doSecondaryAction($event)" aria-label="Send Email" class="md-secondary md-hue-3" ></md-icon>
    <md-icon class="md-secondary" ng-click="doSecondaryAction($event)" aria-label="Chat" md-svg-icon="communication:message"></md-icon>
  </md-list-item>
</md-list>