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" ng-click="select(datalist)" ng-class="{active: isActive(datalist)}">
 <div>{{ datalist.name }} </div> 
 </li>
</ul> 
        
    
    
    
    </div>
</div>

CSS

.paginationclass{
    
margin: 19px 28px;    
}
.paginationclass div{
    cursor:pointer;
    text-decoration:underline;
}
.active{
    color:red;
}

JavaScript

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

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

  
 $scope.showData = function( ){

 
     $scope.datalists = [
    { "name": "Read about angular"},
    {"name": "Read about knockout"},
    {"name": "Read about backbone"},
    {"name": "Read about jquery"},
    {"name": "Read about javascript"}
    
]
}
 $scope.select= function(item) {
	     $scope.selected = ($scope.selected === item ? null : item); 
	};
$scope.isActive = function(item) {
	       return $scope.selected === item;
	};

 	    
	
});