<!DOCTYPE html>
<html lang="en" ng-app="BlankApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="style.css?fafd" rel="stylesheet">
</head>
<body ng-cloak ng-controller="MainCtrl">
<md-toolbar>
<h2 class="md-toolbar-tools"><span>List With Options</span></h2>
</md-toolbar>
<md-list-item ng-repeat="person in people">
<img alt="{{ person.name }}" ng-src="{{ person.img }}" class="md-avatar" />
<p>{{ person.name }}</p>
<md-menu>
<md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="openMenu($mdOpenMenu, $event)">
<md-icon md-menu-origin aria-label="more_vert">more_vert</md-icon>
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button>
<md-icon aria-label="dialpad">dialpad</md-icon>
Redial
</md-button>
</md-menu-item>
<md-menu-item>
<md-button disabled="disabled">
<md-icon aria-label="email">email</md-icon>
Check Email
</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item>
<md-button ng-click="toggleNotifications()">
<md-icon aria-label="notifications_{{notificationsEnabled ? 'off' : 'active'}}">notifications_{{notificationsEnabled ? 'off' : 'active'}}</md-icon>
{{notificationsEnabled ? 'Disable' : 'Enable' }} notifications
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-icon aria-label="delete">delete</md-icon>
</md-list-item>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<script src="https://kamilkp.github.io/angular-sortable-view/src/angular-sortable-view.js"></script>
<script src="app.js"></script>
</body>
</html>
# Angular Material List With Options
Image, Delete, Notification
[jQuery2DotNet](http://www.jquery2dotnet.com/)
var app = angular.module('BlankApp', ['ngMaterial', 'ngMessages']);
app.controller('MainCtrl', function($scope, $timeout) {
$scope.loginModel = {
username: '',
password: ''
};
$scope.people = [{
name: 'Janet Perkins',
img: 'https://randomuser.me/api/portraits/men/1.jpg',
newMessage: true
}, {
name: 'Mary Johnson',
img: 'https://randomuser.me/api/portraits/men/2.jpg',
newMessage: false
}, {
name: 'Peter Carlsson',
img: 'https://randomuser.me/api/portraits/men/3.jpg',
newMessage: false
}];
$scope.openMenu = function($mdOpenMenu, ev) {
$mdOpenMenu(ev);
};
$scope.notificationsEnabled = true;
$scope.toggleNotifications = function() {
$scope.notificationsEnabled = !$scope.notificationsEnabled;
};
});