Highcharts-ng

A simple Angularjs directive for Highcharts. AngularJs, Highcharts

by Danish Farman

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div ng-app="sampleapp">
  <div ng-controller="samplecontroller as vm" ng-init="vm.showData()">
    <table class="table table-striped">
      <tr>
        <td class="paginationclass" style="font-weight:bold;">Name</td>
        <td class="paginationclass" style="font-weight:bold;">Age</td>
        <td class="paginationclass" style="font-weight:bold;">Designation</td>
      </tr>
      <tr class="paginationclass" ng-repeat="datalist in vm.datalists | pagination: vm.totalItems | limitTo: vm.pageSize">
        <td>{{ datalist.name }}</td>
        <td>{{ datalist.age }}</td>
        <td>{{ datalist.designation }}</td>
      </tr>
    </table>
    <div paginate datalist="vm.datalists" directive-end-fn="vm.controllerEnd(directiveData)">
    </div>
  </div>
</div>

CSS

.paginationclass {
  margin: 19px 28px;
}

.paginationclass span {
  margin-left: 15px;
  display: inline-block;
}

.pagination-controle li {
  display: inline-block;
}

.pagination-controle button {
  font-size: 12px;
  margin-top: -26px;
  cursor: pointer;
}

.pagination {
  margin: 5px 12px !important;
}

JavaScript

// reference taken from : http://stackoverflow.com/questions/17404864/pass-arguments-to-parent-controller-method-from-directive
// http://www.code-hound.com/how-to-build-more-advanced-paging-with-angularjs/
angular.module('sampleapp', [])
  .controller('samplecontroller', ['getDataService', function(getDataService) {
    var vm = this;
    vm.curPage = 0;
    vm.pageSize = 2;
    vm.showData = function() {
      vm.datalists = getDataService.datalist;
    };
    vm.controllerEnd = function(directiveData) {
      vm.totalItems = directiveData;
    };
  }])
  .filter('pagination', [function() {
    return function(input, start) {
      var res = "";
      if (input !== undefined) {
        start = +start;
        res = input.slice(start);
      }
      return res;
    };
  }])
  .filter('ceil', [function() {
    return function(input) {
      return Math.ceil(input);
    };
  }])
  .directive('paginate', [function() {
    return {
      restrict: 'EA',
      transclude: true,
      scope: {
        datalist: '=datalist',
        directiveEndFn: '&'
      },
      bindToController: true,
      controller: function($scope) {
        $scope.curPage = $scope.$parent.vm.curPage;
        $scope.pageSize = $scope.$parent.vm.pageSize;
        var watchAndUpdate = function() {
          $scope.$watch('totalItems', function(myModelValue) {
            $scope.directiveEndFn({
              directiveData: myModelValue
            });
          });
        };
        $scope.next = function() {
          $scope.curPage = $scope.curPage + 1;
          $scope.totalItems = $scope.curPage * $scope.pageSize;
          watchAndUpdate();
        };
        $scope.previous = function() {
          $scope.curPage = $scope.curPage - 1;
          $scope.totalItems = $scope.curPage * $scope.pageSize;
          watchAndUpdate();
        };
        $scope.disablePrevious = function() {
          return $scope.curPage == 0;
        };
        $scope.disableNext = function() {
          return...