angular.module("ngMaterialSample", ["ngMaterial"]) .controller('dinosaurCtrl', function($scope) { $scope.dinosaurs = [{ "name": "bruhathkayosaurus", "appeared": -70000000, "height": 25, "length": 44, "order": "saurischia", "vanished": -70000000, "weight": 135000, "background": "green", "imageUrl": "https://github.com/kvkirthy/VenCKI-Samples/blob/develop/Images/Dinosaurs/bruhathkayosaurus.png?raw=true" }, { "name": "lambeosaurus", "appeared": -76000000, "height": 2.1, "length": 12.5, "order": "ornithischia", "vanished": -75000000, "weight": 5000, "background": "pink", "imageUrl": "https://github.com/kvkirthy/VenCKI-Samples/blob/develop/Images/Dinosaurs/lambeosaurus.png?raw=true" }, { "name": "linhenykus", "appeared": -85000000, "height": 0.6, "length": 1, "order": "theropoda", "vanished": -75000000, "weight": 3, "background": "gray", "imageUrl": "https://github.com/kvkirthy/VenCKI-Samples/blob/develop/Images/Dinosaurs/Linhenykus.jpg?raw=true" }, { "name": "pterodactyl", "appeared": -150000000, "height": 0.6, "length": 0.8, "order": "pterosauria", "vanished": -148500000, "weight": 2, "background": "blue", imageUrl: "https://github.com/kvkirthy/VenCKI-Samples/blob/develop/Images/Dinosaurs/pterodactyl.png?raw=true" }, { "name": "stegosaurus", "appeared": -155000000, "height": 4, "length": 9, "order": "ornithischia", "vanished": -150000000, "weight": 2500, "background": "pink", "imageUrl": "https://github.com/kvkirthy/VenCKI-Samples/blob/develop/Images/Dinosaurs/triceratops.png?raw=true" }, { "name": "triceratops", "appeared": -68000000, "height": 3, "length": 8, "order": "ornithischia", "vanished": -66000000, "weight": 11000, "background": "yellow", "imageUrl": "https://github.com/kvkirthy/VenCKI-Samples/blob/develop/Images/Dinosaurs/stegosaurus.gif?raw=true" }]; })
<div ng-app="ngMaterialSample"> <md-toolbar layout-padding> <div class="md-toolbar-tools"> <h2>Grid List Sample</h2> <span flex> </span> </div> </md-toolbar> <md-content ng-controller="dinosaurCtrl"> <md-grid-list md-cols-gt-sm="4" md-cols-sm="2" md-cols="1" md-row-height="200px"> <md-grid-tile md-rowspan-gt-xs="{{($index===0)?2:1}}" ng-class="item.background" ng-click="null" ng-repeat="item in dinosaurs"> <div layout-padding layout="row"> <div flex="50"> Appeared {{item.appeared}} years ago and vanished {{item.vanished}}. She used weigh {{item.weight}} lbs. </div> <div flex="50"> <img style="max-width:100px" ng-src="{{item.imageUrl}}" /></div> </div> <md-grid-tile-footer flex layout-padding> <strong>{{item.name}}</strong> <div>{{item.order}}</div> </md-grid-tile-footer> </md-grid-tile> </md-grid-list> </md-content> </div>
pre { background-color: lightgray; } .pink { background-color: lightpink; } .green { background-color: lightgreen; } .blue { background-color: lightblue; } .yellow { background-color: lightyellow; } .gray { background-color: white }