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()">
        
        
        <ul>
            <li class="paginationclass" style="font-weight:bold;"> <span>#</span><span>Name</span><span>Age</span><span>Designation</span>           </li>
 <li class="paginationclass" ng-repeat="datalist in datalists | pagination : currentPage*itemsPerPage | limitTo: itemsPerPage">
     <span>{{(itemsPerPage*currentPage)+($index+1) }}</span><span>{{ datalist.name }}</span><span>{{ datalist.age }}</span>
         <span>{{ datalist.Designation }}</span>
     
 </li>
</ul> 
        
    <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

.paginationclass{
margin: 15px 28px; 
 }
.paginationclass div{
    border-bottom:1px solid silver;
    
}
.paginationclass span{
    margin:0px 15px;
    display:inline-block;
    padding:5px 0px;
    text-align:left;
    width:70px;
}
.pagination-controle li{
    display: inline-block;
    
}
.pagination-controle button{
    width: 63px;
    font-size: 12px;
    margin-left: 13px;
    cursor:pointer;
}
.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":...