<!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">
</head>
<body ng-cloak ng-controller="MainCtrl as vm">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Download</h2>
</div>
</md-toolbar>
<md-content>
<md-list>
<md-list-item class="md-2-line secondary-button-padding" ng-repeat="item in vm.items">
<md-checkbox></md-checkbox>
<div class="md-list-item-text">
<h3>{{item.fileName}}</h3>
<p>
{{item.description}}
</p>
</div>
<md-menu class="md-secondary">
<md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="vm.openMenu($mdOpenMenu, $event)">
<md-icon md-font-icon="material-icons">more_vert</md-icon>
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button>
<md-icon md-font-icon="material-icons">file_download</md-icon>
Download
</md-button>
</md-menu-item>
<md-menu-item>
<md-button>
<md-icon md-font-icon="material-icons">info</md-icon>
More Info
</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item>
<md-button>
<md-icon md-font-icon="material-icons">delete</md-icon>
Delete
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-divider></md-divider>
</md-list-item>
</md-list>
</md-content>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/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="app.js"></script>
</body>
</html>
# Angular Material Download List with options
[jQuery2DotNet](http://www.jquery2dotnet.com/)
var app = angular.module('BlankApp', ['ngMaterial']);
app.controller('MainCtrl', function($scope, $timeout) {
var vm = this;
vm.items = [];
for (var i = 0; i < 24; i++) {
vm.items.push({
fileName: "File name " + (i + 1) + " ",
description: "PDF " + (i + 1) + "'s description."
});
}
vm.openMenu = function($mdOpenMenu, ev) {
$mdOpenMenu(ev);
};
});