angular.module('switchApp', ['ngMaterial']);
<!DOCTYPE html>
<html ng-app="switchApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<link href="style.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script src="main.js"></script>
<script src="app.component.js"></script>
</head>
<body>
<switch-app>
Pizza is on the way...
</switch-app>
</body>
</html>
/* Put your css in here */
body {
margin: 0;
background: #7aae47;
}
h3 {
text-align: center;
}
.container {
padding: 10px;
max-width: 768px;
margin: 0 auto;
}
button {
color: #7aae47 !important;
}
md-divider {
margin: 10px 0;
}
md-toolbar {
background-color: #5f3694 !important;
color: white;
}
.toolbar-spacer {
flex: 1 1 auto;
}
md-grid-tile {
background-size: cover !important;
position: relative;
color: white;
}
md-grid-tile:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0, 0.3);
z-index: 0;
}
md-grid-tile figure {
z-index: 1;
padding: 10px !important;
cursor: pointer;
}
md-grid-tile:hover figure {
background: rgba(0,0,0, 0.5);
}
md-grid-tile-footer {
background: rgba(0,0,0,0.5) !important;
}
figcaption {
margin: 0 auto;
}
figcaption h3 {
margin: 0 !important;
}
md-grid-tile:hover md-grid-tile-footer {
display: none;
}
md-grid-tile .description {
display: none;
}
md-grid-tile:hover .description {
display: block;
}
function AppComponentCtrl($window) {
this.currentView;
this.turtles = [
{name: 'Michelangelo', link: 'http://www.nick.com/ninja-turtles/michelangelo', thumb: 'http://onehungrymind-45fd.kxcdn.com/plunks/michelangelo.jpg', description: "Mikey is the class clown of the Ninja Turtle’s sewer lair, constantly pranking his brothers and concocting some seriously sick food (pizza milkshake, anyone?). When he’s not dancing to his fave tunes or downing a whole pepperoni pie, Mikey is kicking some major Kraang butt with his brothers."},
{name: 'Donatello', link: 'http://www.nick.com/ninja-turtles/donatello/', thumb: 'http://onehungrymind-45fd.kxcdn.com/plunks/donatello.jpg', description: "From insane weapons to some awesome vehicles, Donnie has invented some epic gadgets to help keep the Ninja Turtles safe. His talents include hacking computer systems and cracking security codes. He just can’t seem to figure out how to steal April’s heart..."},
{name: 'Leonardo', link: 'http://www.nick.com/ninja-turtles/leonardo/', thumb: 'http://onehungrymind-45fd.kxcdn.com/plunks/leonardo.jpg', description: "Leo eats, sleeps and breathes ninjutsu, which is probably why he was chosen by Master Splinter to be the leader of the Ninja Turtles. Keeping his rowdy brothers in line can be hard, but Leo never lets anything get in the way of their strong teamwork when it comes to defeating villains."},
{name: 'Raphael', link: 'http://www.nick.com/ninja-turtles/raphael/', thumb: 'http://onehungrymind-45fd.kxcdn.com/plunks/raphael.jpg', description: "Raph is always the first to a fight, and never forgets to brings his tough attitude and hot-headed temper. Though he’s sometimes hard on his brothers, Raph shows his softer side when he’s with his pet turtle, Spike. Oh, and he’s also afraid of cockroaches… but don’t tell him we told you!"}
];
this.setCurrentView = function(view) {
this.currentView = view;
};
this.navigate = function(url) {
$window.open(url);
}
}
var switchApp = {
bindings: {},
templateUrl: 'app.component.html',
controller: AppComponentCtrl
}
angular
.module('switchApp')
.component('switchApp', switchApp);
<md-toolbar class="md-whiteframe-3dp">
<div class="md-toolbar-tools">
The Turtles
<span class="toolbar-spacer"></span>
<md-button ng-click="$ctrl.setCurrentView('list')" class="md-accent">LIST</md-button>
<md-button ng-click="$ctrl.setCurrentView('dense')" class="md-accent">DENSE LIST</md-button>
<md-button ng-click="$ctrl.setCurrentView('grid')" class="md-accent">GRID</md-button>
</div>
</md-toolbar>
<div class="container">
<div ng-switch="$ctrl.currentView">
<md-list ng-switch-when="list">
<div ng-repeat="turtle in $ctrl.turtles">
<md-list-item class="md-2-line" ng-href="{{turtle.link}}" target="_blank">
<img class="md-avatar" ng-src="{{turtle.thumb}}" alt="{{turtle.name}}">
<div class="md-list-item-text" layout="column">
<h3>{{turtle.name}}</h3>
<p>{{turtle.description}}</p>
</div>
</md-list-item>
<md-divider></md-divider>
</div>
</md-list>
<md-list ng-switch-when="dense" class="md-dense">
<div ng-repeat="turtle in $ctrl.turtles">
<md-list-item class="md-2-line" ng-href="{{turtle.link}}" target="_blank">
<img class="md-avatar" ng-src="{{turtle.thumb}}" alt="{{turtle.name}}">
<div class="md-list-item-text">
<h3>{{turtle.name}}</h3>
<p>{{turtle.description}}</p>
</div>
</md-list-item>
<md-divider></md-divider>
</div>
</md-list>
<md-grid-list ng-switch-when="grid" md-cols="2" md-row-height="2:2" >
<md-grid-tile ng-click="$ctrl.navigate(turtle.link)" ng-href="{{turtle.link}}" target="_blank" ng-style="{'background': 'url(' + turtle.thumb + ')'}" ng-repeat="turtle in $ctrl.turtles">
<span class="description">{{turtle.description}}</span>
<md-grid-tile-footer>
<h3 class="name">{{turtle.name}}</h3>
</md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>
<h3 ng-switch-default>Please select a layout above</h3>
</div>
</div>