Angular Material Sample

by V Keerti Kotaru

HTML

<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/angular_material/1.1.0/angular-material.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<div ng-app="ngMaterialSample">
  <md-toolbar layout-padding>
    <div class="md-toolbar-tools">
      <h2>Grid List Sample</h2>
      <span flex>&nbsp;</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>

CSS

pre {
          background-color: lightgray;
        }
        
        .pink {
          background-color: lightpink;
        }
        
        .green {
          background-color: lightgreen;
        }
        
        .blue {
          background-color: lightblue;
        }
        
        .yellow {
          background-color: lightyellow;
        }
        
        .gray {
          background-color: white
        }

JavaScript

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,
     ...