angular-scrollable demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Angular-scrollable-table directive demo</title>

    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
        rel="stylesheet" type="text/css">
    <link href='https://rawgit.com/Gary-Li/angular-scrollable-table/master/scrollable-table.css' rel="stylesheet" type="text/css">
    <style type="text/css">
      body {
        margin: 20px;
      }

      header, footer {
        margin: 10px 0;
      }
      header label {
        padding-left: 20px;
      }
    </style>
    <script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://code.angularjs.org/1.2.19/angular.js"></script>
    <script type="text/javascript" src="https://rawgit.com/Gary-Li/angular-scrollable-table/master/angular-scrollable-table.js"></script>
    <script type="text/javascript" src="app.js"></script>
  </head>
  <body ng-app="myApp" ng-init="rootWidth=600;">
    <div ng-controller="MyCtrl" class="test-container" ng-style="{'width': rootWidth+'px'}">
      <header>
        <button class="btn btn-default" type="button" ng-click="toggleCol()">Toggle column</button>
        <label for="width">Table width: </label>
        <input type="number" step="1" max="1200" min="400" ng-model="rootWidth">
      </header>
      <scrollable-table watch="visibleProjects" resizable>
        <table class="table table-striped table-bordered">
          <thead>
          <tr>
            <th data-width="10%">Facility</th>
            <th sortable-header col="code" data-width="15%">Unit code</th>
            <th sortable-header col="cost" data-width="25%">Cost</th>
            <th sortable-header col="conditionRating" data-width="40%">Condition score</th>
            <th ng-show="toggleColumn" col="extent">Not sortable</th>
            <th sortable-header col="planYear" comparator-fn="comparator" data-width="10%">Plan year</th>
          </tr>
          </thead>
          <tbody>
          <tr ng-repeat="response in visibleProjects" row-id="{{ response.facility }}"
            ng-class="{info: selected == response.facility}" >
            <td>{{ response.facility }}</td>
            <td>{{ response.code }}</td>
            <td>{{ response.cost }}</td>
            <td class="cr">{{ response.conditionRating }}</td>
            <td ng-show="toggleColumn">{{ response.extent }}</td>
            <td>{{ response.planYear }}</td>
          </tr>
          </tbody>
        </table>
      </scrollable-table>
      <footer>
        <label>Select a facility:</label>
        <select ng-model="selected" ng-options="f for f in facilities"></select>
      </footer>
    </div>
  </body>
</html>

/* Styles go here */

'use strict';

var myApp = angular.module('myApp',['scrollable-table'])
.service('Data', function() {
    this.get = function() {
        return [{
          facility: "Atlanta",
          code: "C-RD34",
          cost: 540000,
          conditionRating: 52,
          extent: 100,
          planYear: 2014
        }, {
          facility: "Seattle",
          code: "CRDm-4",
          cost: 23000,
          conditionRating: 40,
          extent: 88,
          planYear: 2014
        }, {
          facility: "Austin",
          code: "GR-5",
          cost: 1200000,
          conditionRating: 92,
          extent: 90,
          planYear: 2014
        }, {
          facility: "Dayton",
          code: "LY-7",
          cost: 123000,
          conditionRating: 71,
          extent: 98,
          planYear: 2014
        }, {
          facility: "Portland",
          code: "Dm-4",
          cost: 149000,
          conditionRating: 89,
          extent: 77,
          planYear: 2014
        }, {
          facility: "Dallas",
          code: "AW-3",
          cost: 14000,
          conditionRating: 89,
          extent: 79,
          planYear: 2014
        }, {
          facility: "Houston",
          code: "Dm-4",
          cost: 1100000,
          conditionRating: 93,
          extent: 79,
          planYear: 2014
        }, {
          facility: "Boston",
          code: "DD3",
          cost: 1940000,
          conditionRating: 86,
          extent: 80,
          planYear: 2015
        }, {
          facility: "New York",
          code: "ER1",
          cost: 910000,
          conditionRating: 87,
          extent: 82,
          planYear: 2015
        }];
    };
})
// when sorting by year, sort by year and then replace %
.service("Comparators", function() { 
  this.year = function(r1, r2) {
    if(r1.planYear === r2.planYear) {
      if (r1.extent === r2.extent) return 0;
      return r1.extent > r2.extent ? 1 : -1;
    } else if(!r1.planYear || !r2.planYear) {
      return !r1.planYear && !r2.planYear ? 0 : (!r1.planYear ? 1 : -1);
    }
    return r1.planYear > r2.planYear ? 1 : -1;
  };
})
.controller('MyCtrl', function($scope, $timeout, $window, Data, Comparators) {
    $scope.visibleProjects = Data.get();
    $scope.comparator = Comparators.year;
    $scope.facilities = [];
    for(var i = 0; i < $scope.visibleProjects.length; i++) {
        $scope.facilities.push($scope.visibleProjects[i].facility);
    }
    
    $scope.$watch('selected', function(fac) {
       $scope.$broadcast("rowSelected", fac);
    });

    $scope.changeRecord = function(){
        $scope.visibleProjects[3].code = 'aaabbbccc';
        $scope.$broadcast("renderScrollableTable");
    };

    $scope.replaceRecords = function(){
        $scope.visibleProjects = Data.get();
    };

    $scope.toggleCol = function() {
      $scope.toggleColumn = !$scope.toggleColumn;
      $scope.$broadcast("renderScrollableTable");
    };
})
;