AngularJS Simple Directive paginator

by dandoyon

HTML

<script src="http://code.angularjs.org/1.0.0rc6/angular-1.0.0rc6.min.js"></script>
<div ng-app='MF' id='container' ng-controller="PageCtrl">
    <div class='paginator'>
    <ul>
        <page ng-repeat="page in mypages" p="{{page}}"></page>
    </ul>
    <span>{{page_range}}</span> 
    </div>
</div>

CSS

#container .paginator ul li.inactive,
#container .paginator ul li.inactive:hover {
    background-color:#ededed;
    color:#bababa;
    border:1px solid #bababa;
    cursor: default;
}
#container .paginator {
    width: 800px;
    height: 25px;
}
#container .paginator 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 ul li.current {
    color:#fff;
    background-color:#006699;
}

JavaScript

var MFNG = angular.module('MF', ['ngResource']);

MFNG.directive('page', function() {
    return {
        restrict: 'E',
        scope: {
            p: 'bind'
        },
        template: "<li ng-class='isCurrent({{p}})'>{{p}}</li>"
    };
});

MFNG.controller('PageCtrl', function($scope, $resource) {
    $scope.page_range = '10 - 84 results';
    $scope.mypages = {
        '1': '1',
        '2': '2',
        '3': '3',
        '4': '4'
    };
    $scope.currentPage = '2';

    $scope.isCurrent = function(page) {
        return page == $scope.currentPage ? "active" : "current";
    };
});