Highcharts-ng

A simple Angularjs directive for Highcharts. AngularJs, Highcharts

by Ravindra Athreya

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="samplecontoller" ng-init="showData()">
         <table class="table table-bordered table-hover">
				    <thead>
				      <tr>
				        <th>#</th>
				        <th>Name</th>
				        <th>Age</th>
                <th>Designation</th>
				      </tr>
				    </thead>
				    <tbody>
				       <tr ng-repeat="datalist in datalists | pagination : currentPage*itemsPerPage | limitTo: itemsPerPage">
					    <td>{{(itemsPerPage*currentPage)+($index+1) }}</td>
					    <td>{{ datalist.name }}</td>
					    <td>{{ datalist.age }}</td>
              <td>{{ datalist.Designation }}</td>
					  </tr>
				    </tbody>
				  </table>
        
       
        
    <div class="pagination-div">

        <ul class="pagination">
              <li ng-class="DisablePrevPage()">
                <a href ng-click="prevPage()">« Prev</a>
              </li>
              <li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)">
                <a href="#">{{n+1}}</a>
              </li>
              <li ng-class="DisableNextPage()">
                <a href ng-click="nextPage()">Next »</a>
                 
              </li>
            </ul>
        
</div>
    
    
    
    </div>
</div>

CSS

.pagination-div{
    margin-left:20px;
}

JavaScript

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

myapp.controller('samplecontoller', function ($scope) {

  
 $scope.showData = function( ){

 $scope.itemsPerPage = 3;
 $scope.currentPage = 0;
     $scope.datalists = [
         { "name": "John","age":"16","Designation":"SW"},
    {"name": "John2","age":"21","Designation":"SW1"},
    {"name": "John3","age":"19","Designation":"SW2"},
    {"name": "John4","age":"17","Designation":"SW3"},
    {"name": "John5","age":"21","Designation":"SW4"},
    {"name": "John6","age":"31","Designation":"SW5"},
    {"name": "John7","age":"41","Designation":"SW6"},
    {"name": "John8","age":"13","Designation":"SW7"},
    {"name": "John18","age":"15","Designation":"SW8"},
    {"name": "John28","age":"16","Designation":"SW9"},
    {"name": "John38","age":"18","Designation":"SW10"},
    {"name": "John48","age":"19","Designation":"SW11"},
    {"name": "John58","age":"21","Designation":"SW12"},
    {"name": "John68","age":"22","Designation":"SW13"},
    {"name": "John68","age":"23","Designation":"SW14"},
    {"name": "John68","age":"24","Designation":"SW15"},
    {"name": "John68","age":"26","Designation":"SW16"},
    {"name": "John68","age":"56","Designation":"SW17"},
         {"name": "John28","age":"16","Designation":"SW18"},
    {"name": "John38","age":"45","Designation":"SW19"},
    {"name": "John48","age":"56","Designation":"SW20"},
    {"name": "John58","age":"45","Designation":"SW21"},
    {"name": "John68","age":"44","Designation":"SW22"},
    {"name": "John68","age":"67","Designation":"SW23"},
    {"name": "John68","age":"65","Designation":"SW24"},
    {"name": "John68","age":"12","Designation":"SW25"},
    {"name": "John68","age":"33","Designation":"SW26"},
    {"name": "John28","age":"22","Designation":"SW27"},
    {"name": "John38","age":"16","Designation":"SW28"},
    {"name": "John48","age":"16","Designation":"SW29"},
    {"name": "John58","age":"45","Designation":"SW30"},
    {"name":...