Angular paging directive

by mediaguru

HTML

<div ng-app="app">
  <div ng-controller="myController">
    <div ng-repeat="cve in cve_data | orderBy:propertyName:reverse | startFrom:currentPage*pageSize | limitTo:5">
          <div class="cve-col-1">
          Vulnerability: <a class="cve-link" ng-href="https://cve.mitre.org/cgi-bin/cvename.cgi?name={{cve.cve_id}}" title="View Vulnerability Details" target="_blank">{{cve.cve_id}}</a>
          </div>
          <div class="cve-col-2">
            CVSS Score: <span class="{{cve.score}}">{{cve.score}}</span>
          </div>
          <div class="cve-col-3">
            CVSS Rating: <span class="{{cve.score}}">{{cve.score}}</span>
          </div>
          <div class="cve-col-4" ng-click="showDetails = ! showDetails ; clicked = !clicked" title="Show/Hide Description and Related Links">
            <span class="cve-link">Details <span class="more-info">&nbsp;<i aria-hidden="true" class="fa fa-chevron-up" ng-class="{'expanded': showDetails}"></i></span></span>
          </div>
          <div class="row url-expandable clearfix" ng-class="{'expanded': showDetails}">
            <div class="cve-padding">
              <p>{{cve.summary }}</p>
              <h4 style="margin-bottom:5px;" class="title">Links</h4>
              <ul ng-repeat="url in (cve.urls | commaToArray)">
                <li><a class="cve-link" ng-href="{{url}}" target="_blank" title="Visit URL">{{url}}</a></li>
              </ul>
            </div>
          </div>
        </div>
        <br />
        <!-- <dir-pagination-controls max-size="10" direction-links="true" boundary-links="true" pagination-id="$index" class="criteria-list-table-pagination-controls" ng-click="showDetails = false"></dir-pagination-controls> -->
        <div ng-show="pages > 1" class="criteria-list-table-pagination-controls">
            <ul class="pagination">
              <li>
                <button href="#" ng-disabled="currentPage == 0" ng-class="{'disabled': currentPage == 0}" ng-click="currentPage=0"...

CSS

/**********************************
*
*   CVE modal
*
**********************************/
div.cve-padding {
	padding: 20px;
}
.cve-details {
	float: left;
	padding: 20px;
	font-size: 14px;
	font-weight: 200;
	max-height:0;
	overflow:hidden;
	transition: max-height 0.7s ease-out;
}
.cve-details.expanded {
	max-height:1100px;
	padding: 20px;
	overflow:hidden;
	transition: max-height 0.7s ease-out;
}
.cve-value-hover-wrapper .cve-value-hover.visible {
	display: block;
}
.cve-value-hover-wrapper {
	position: relative;
}

.cve-value-hover-wrapper:hover {
	text-decoration: underline;
	cursor: pointer;
}
.cve-value-hover-wrapper .cve-value-hover {
	position: absolute;
	z-index: 10;
	top: -5px;
	left: 115px;
	width: 600px;
	padding: 10px;
	text-align: left;
	color: #70a9d6;
	border: 1px solid #70a9d6;
	background-color: #fafdff;
	// max-height: 130px;
	// overflow: auto;
	display: none;

}

.cve-value-hover-wrapper.blue-text .cve-value-hover::after {
	position: absolute;
		top: 10px;
		left: -6px;
		content: '';
		width: 10px;
		height: 10px;
		border-left: 1px solid #70a9d6;
		border-bottom: 1px solid #70a9d6;
		background-color: #fafdff;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
}

th.sortorder {
	cursor: pointer;
}
td.cve {
	padding: 3px;
}
.ngdialog.ngdialog-theme-default.custom-width-700 .ngdialog-content {
	width: 700px;
	padding: 20px;
	overflow: hidden;
}

.ngdialog.ngdialog-theme-default.custom-width-850 .ngdialog-content {
	width: 850px;
	padding: 20px;
	overflow: hidden;
}

.host-profile-modal-table h3 {
	margin-bottom: 10px;
	padding: 10px;
	background: #F2F2F2;
}
.cve-col-1, .cve-col-2, .cve-col-3, .cve-col-4 {
	float: left;
	width: 200px;
	font-size: 14px;
	font-weight: 200;
	border-bottom: 1px solid #f2f2f2;
	padding-bottom: 8px;
}
.cve-col-1 {
	margin-left: 10px;
	width: 190px;
}
.cve-col-2 {
	padding-left: 50px;
}
// .cve-col-4 {
// 	float: left;
// 	width: 100%;
// 	font-size: 14px;
// 	font-weight:...

JavaScript

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

app.controller("myController", function($scope) {

			$scope.cve_data = [
			 {
			   "access_vector": "NETWORK",
			   "access_complexity": "MEDIUM",
			   "authentication": "NONE",
			   "availability_impact": "PARTIAL",
			   "confidentiality_impact": "PARTIAL",
			   "cve_id": "CVE-2007-6752",
			   "integrity_impact": "PARTIAL",
			   "last_modified_datetime": "2012-03-28T12:30:54.453-04:00",
			   "published_datetime": "2012-03-28T06:54:59.457-04:00",
			   "score": "6.8",
			   "summary": "** DISPUTED ** Cross-site request forgery (CSRF) vulnerability in Drupal 7.12 and earlier allows remote attackers to hijack the authentication of arbitrary users for requests that end a session via the user/logout URI.  NOTE: the vendor disputes the significance of this issue, by considering the \"security benefit against platform complexity and performance impact\" and concluding that a change to the logout behavior is not planned because \"for most sites it is not worth the trade-off.\"",
			   "urls": "http://drupal.org/node/144538,http://groups.drupal.org/node/216314,http://ivanobinetti.blogspot.it/2012/03/drupal-cms-712-latest-stable-release.html,http://packetstormsecurity.org/files/110404/drupal712-xsrf.txt,http://www.exploit-db.com/exploits/18564/"
			 },
			 {
			   "access_vector": "NETWORK",
			   "access_complexity": "LOW",
			   "authentication": "SINGLE_INSTANCE",
			   "availability_impact": "PARTIAL",
			   "confidentiality_impact": "PARTIAL",
			   "cve_id": "CVE-2016-3162",
			   "integrity_impact": "PARTIAL",
			   "last_modified_datetime": "2016-04-22T10:11:01.287-04:00",
			   "published_datetime": "2016-04-12T11:59:00.117-04:00",
			   "score": "6.5",
			   "summary": "The File module in Drupal 7.x before 7.43 and 8.x before 8.0.4 allows remote authenticated users to bypass access restrictions and read, delete, or substitute a link to a file uploaded to an unprocessed form by leveraging permission to create...