Angular Test

Angular Test

by Rishabh Sharma

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<div ng-controller="AppController">
  <table>
    <tr>
      <th ng-repeat="(key, val) in data[0]">
        {{key}}
      </th>
    </tr>
    <tr ng-repeat="row in data">
      <td ng-repeat="cell in row">{{cell}}</td>
    </tr>
  </table>
</div>

CSS

.app-directive {
  border: 1px solid darkgray;
  padding: 5px;
  background: lightblue;
}

body {
  background-color: white;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

JavaScript

angular.module('app', [])
  .controller('AppController', AppController)
  .service('AppService', AppService);

function AppController($scope, AppService) {
  $scope.greeting = 'Hello World!';
  $scope.data = AppService.data;
}

function AppService() {

  this.data = [{
    "Measure Category": "Business Metrics",
    "Category Weight": 0.35,
    "Measure": "Transactions",
    "Measure Weight": 0.3,
    "Country": "Angola",
    "Bottler": "Brasserie Et Glaciére Internationale",
    "Bottler Location Description": "Coca-Cola Bottling Luan",
    "Market Tier": 2,
    "Jul_16": 37743293.05,
    "Jul_17": 30087763.15
  }, {
    "Measure Category": "Business Metrics",
    "Category Weight": 0.35,
    "Measure": "Transactions",
    "Measure Weight": 0.3,
    "Country": "Tanzania",
    "Bottler": "Shah Group",
    "Bottler Location Description": "Nyanza Bottlers Ltd.",
    "Market Tier": 2,
    "Jul_16": 29763035.47,
    "Jul_17": 23397828
  }, {
    "Measure Category": "Business Metrics",
    "Category Weight": 0.35,
    "Measure": "Transactions",
    "Measure Weight": 0.3,
    "Country": "Malawi",
    "Bottler": "Brasserie Et Glaciére Internationale",
    "Bottler Location Description": "Southern Bottlers Limit",
    "Market Tier": 2,
    "Jul_16": 12595927.46,
    "Jul_17": 8188714.36
  }, {
    "Measure Category": "Business Metrics",
    "Category Weight": 0.35,
    "Measure": "Transactions",
    "Measure Weight": 0.3,
    "Country": "Eritrea",
    "Bottler": "Coca-Cola Red Sea Bottlers",
    "Bottler Location Description": "Asmara",
    "Market Tier": 2,
    "Jul_16": 1589904.159,
    "Jul_17": 0
  }, {
    "Measure Category": "Business Metrics",
    "Category Weight": 0.35,
    "Measure": "Transactions",
    "Measure Weight": 0.3,
    "Country": "Uganda",
    "Bottler": "Coca-Cola Sabco",
    "Bottler Location Description": "All",
    "Market Tier": 1,
    "Jul_16": 44743877.45,
    "Jul_17": 42393519.45
  }, {
    "Measure Category": "Business Metrics",
   ...