1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94 | 1×
| angular.module('bottomSheetDemo1', ['ngMaterial'])
.config(function($mdIconProvider) {
$mdIconProvider
.icon('share-arrow', 'assets/angular-material-assets/img/icons/share-arrow.svg', 24)
.icon('upload', 'assets/angular-material-assets/img/icons/upload.svg', 24)
.icon('copy', 'assets/angular-material-assets/img/icons/copy.svg', 24)
.icon('print', 'assets/angular-material-assets/img/icons/print.svg', 24)
.icon('hangout', 'assets/angular-material-assets/img/icons/hangout.svg', 24)
.icon('mail', 'assets/angular-material-assets/img/icons/mail.svg', 24)
.icon('message', 'assets/angular-material-assets/img/icons/message.svg', 24)
.icon('copy2', 'assets/angular-material-assets/img/icons/copy2.svg', 24)
.icon('facebook', 'assets/angular-material-assets/img/icons/facebook.svg', 24)
.icon('twitter', 'assets/angular-material-assets/img/icons/twitter.svg', 24);
})
.controller('BottomSheetExample', function($scope, $timeout, $mdBottomSheet, $mdToast) {
$scope.alert = '';
$scope.showListBottomSheet = function() {
$scope.alert = '';
$mdBottomSheet.show({
templateUrl: 'bottom-sheet-list-template.html',
controller: 'ListBottomSheetCtrl'
}).then(function(clickedItem) {
$scope.alert = clickedItem['name'] + ' clicked!';
});
};
$scope.showGridBottomSheet = function() {
$scope.alert = '';
$mdBottomSheet.show({
templateUrl: 'bottom-sheet-grid-template.html',
controller: 'GridBottomSheetCtrl',
clickOutsideToClose: false
}).then(function(clickedItem) {
$mdToast.show(
$mdToast.simple()
.textContent(clickedItem['name'] + ' clicked!')
.position('top right')
.hideDelay(1500)
);
});
};
})
.controller('ListBottomSheetCtrl', function($scope, $mdBottomSheet) {
$scope.items = [
{ name: 'Share', icon: 'share-arrow' },
{ name: 'Upload', icon: 'upload' },
{ name: 'Copy', icon: 'copy' },
{ name: 'Print this page', icon: 'print' },
];
$scope.listItemClick = function($index) {
var clickedItem = $scope.items[$index];
$mdBottomSheet.hide(clickedItem);
};
})
.controller('GridBottomSheetCtrl', function($scope, $mdBottomSheet) {
$scope.items = [
{ name: 'Hangout', icon: 'hangout' },
{ name: 'Mail', icon: 'mail' },
{ name: 'Message', icon: 'message' },
{ name: 'Copy', icon: 'copy2' },
{ name: 'Facebook', icon: 'facebook' },
{ name: 'Twitter', icon: 'twitter' },
];
$scope.listItemClick = function($index) {
var clickedItem = $scope.items[$index];
$mdBottomSheet.hide(clickedItem);
};
})
.run(function($templateRequest) {
var urls = [
'assets/angular-material-assets/img/icons/share-arrow.svg',
'assets/angular-material-assets/img/icons/upload.svg',
'assets/angular-material-assets/img/icons/copy.svg',
'assets/angular-material-assets/img/icons/print.svg',
'assets/angular-material-assets/img/icons/hangout.svg',
'assets/angular-material-assets/img/icons/mail.svg',
'assets/angular-material-assets/img/icons/message.svg',
'assets/angular-material-assets/img/icons/copy2.svg',
'assets/angular-material-assets/img/icons/facebook.svg',
'assets/angular-material-assets/img/icons/twitter.svg'
];
angular.forEach(urls, function(url) {
$templateRequest(url);
});
});
|