AngularJS: Paginator

by niden

HTML

<script src="http://code.angularjs.org/1.0.0rc6/angular-1.0.0rc6.js"></script>
<div ng-app="MF">
  <script type="text/ng-template"  id="pagesView.html">
    <ul>
        <li ng-repeat="page in pages" ng-click="onClick(page)">{{page.page}}</li>
    </ul>
  </script>

  <div class='paginator' ng-controller="DailyCtrl">
      <pages model="eventsModel"></pages> <span>{{orgResult.page_range}}</span>
  </div>
</div>

CSS

#container .paginator pages ul li.inactive,
#container .paginator pages ul li.inactive:hover {
    background-color:#ededed;
    color:#bababa;
    border:1px solid #bababa;
    cursor: default;
}
#container .paginator {
    width: 800px;
    height: 25px;
}
#container .paginator pages ul li {
    list-style: none;
    float: left;
    border: 1px solid #006699;
    padding: 2px 6px 2px 6px;
    margin: 0 3px 0 3px;
    font-family: arial;
    font-size: 14px;
    color: #006699;
    font-weight: bold;
    background-color: #f2f2f2;
}
#container .paginator ul li:hover {
    color: #fff;
    background-color: #006699;
    cursor: pointer;
}
#container .paginator pages ul li.current {
    color:#fff;
    background-color:#006699;
}

JavaScript

var cal = angular.module("MF", []);

cal.directive("pages", function() {
    return {
        restrict: 'E',
        scope: true,
        templateUrl: "pagesView.html",
        controller: EventsCtrl
    };
});

DailyCtrl = function($scope) {
    $scope.eventsModel = [
        {page: '1'},
        {page: '2'},
        {page: '3'},
        {page: '4'},
        {page: '5'},
        {page: '6'},
        {page: '7'},
        {page: '8'},
        {page: '9'},
        {page: '10'}
    ];
    
    $scope.$on('eventClicked', function(event, calEvent) {
        alert(calEvent.page + ' clicked');
    });
};

EventsCtrl = function($scope, $attrs) {
    $scope.$watch($attrs.model, function(value) {
        if (value) {
            $scope.pages = value;
        }
    });

    $scope.getStyle = function(calEvent) {
        var style = {
            'text-decoration': 'none'
        };
        if (calEvent.page === 1) {
            return angular.extend({
                color: '#000'
            }, style);
        } else {
            return angular.extend({
                color: '#ccc'
            }, style);
        }
    };

    $scope.onClick = function(calEvent) {
        $scope.$emit('eventClicked', calEvent);
    };
};