Highcharts-ng

A simple Angularjs directive for Highcharts. AngularJs, Highcharts

by Ravindra Athreya

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://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" ng-repeat="datalist in datalists | limitTo: paginationLimit()">
 <div>Name : {{ datalist.name }} Age : {{ datalist.age }}</div> 
 </li>
</ul> 
        
<div class="pagination pagination-centered">
    <button class="show-more-btn" ng-show="hasMoreItemsToShow()" ng-click="showMoreItems()">Show more</button>
</div>
    
    
    
    </div>
</div>

CSS

.paginationclass{
    
margin: 19px 28px;    
}
.pagination-controle li{
    display: inline-block;
}
.pagination-centered button{
    
    font-size: 12px;
    margin-left: 28px;
    cursor:pointer;
}

JavaScript

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

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

  
 $scope.showData = function( ){

 
     $scope.datalists = [
    { "name": "John","age":"16"},
    {"name": "John2","age":"21"},
    {"name": "John3","age":"19"},
    {"name": "John4","age":"17"},
    {"name": "John5","age":"21"},
    {"name": "John6","age":"31"},
    {"name": "John7","age":"41"},
    {"name": "John8","age":"16"},
    {"name": "John18","age":"16"},
    {"name": "John28","age":"16"},
    {"name": "John38","age":"16"},
    {"name": "John48","age":"16"},
    {"name": "John58","age":"16"},
    {"name": "John68","age":"16"},
    {"name": "John68","age":"16"}
]
     
     //show more functionality
			var pagesShown = 1;
		    var pageSize = 3;
		    
		    $scope.paginationLimit = function(data) {
		        return pageSize * pagesShown;
		    };
		    $scope.hasMoreItemsToShow = function() {
		        return pagesShown < ($scope.datalists.length / pageSize);
		    };
		    $scope.showMoreItems = function() {
		        pagesShown = pagesShown + 1;       
		    };	
     
         
}

});