ng-repeat/ng-switch

ng-repeat/ng-switch

by Venu Pavuluri

HTML

<div ng-app="myApp" ng-controller="MyCtrl">
  <table>
    <tr ng-repeat="key in keys">
      <td class="rightborder" ng-class="{'bottomborder':$first}">{{labels[key]}}</td>
      <td ng-class="{'rightborder': !$last, 'bottomborder': key == 'id'}" ng-repeat="(index,data) in items">
        <span ng-switch on="key">
        <span ng-switch-when="id">{{data[key]}}</span>
        <span ng-switch-when="name">{{data[key]}}</span>
        <span ng-switch-when="city">{{data[key]}}</span>
        <span ng-switch-when="totalpay">{{(data["hourrate"] * data["totalhours"] | number: 2) || 'N/A'}}</span>
        <span ng-switch-default>{{(data[key] | number: 2) || 'N/A'}}</span>
        </span>
      </td>
    </tr>
  </table>
</div>

CSS

.bottomborder {
  border-bottom: 1px solid #ddd !important;
}

.rightborder {
  border-right: 1px solid #ddd !important;
}

tr td {
  padding: 10px;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {
  $scope.items = [{
    id: "1",
    name: "emp1",
    city: "Redmond",
    hourrate: "40.75562356",
    totalhours: "180"
  }, {
    id: "2",
    name: "emp2",
    city: "Bellevue",
    hourrate: "45.53568989",
    totalhours: "170.5"
  }, {
    id: "3",
    name: "emp3",
    city: "Bellevue"
  }];

  $scope.keys = ["id", "name", "city", "hourrate", "totalhours", "totalpay"];
  $scope.labels = {
    id: "Id",
    name: "Name",
    city: "City",
    hourrate: "Hour Rate",
    totalhours: "Hours",
    totalpay: "Total Pay"
  };
});