Skip to content

Instantly share code, notes, and snippets.

@petehamilton
Last active January 4, 2016 17:19
Show Gist options
  • Save petehamilton/8653151 to your computer and use it in GitHub Desktop.
Save petehamilton/8653151 to your computer and use it in GitHub Desktop.
var app = angular.module('testapp', ['ngRoute']);
app.config(function ($locationProvider) {
// $locationProvider.html5Mode(true);
})
app.controller('MainCtrl', function ($scope, $location, $route) {
// Example URLs which should work on refresh
//
// index.html?search_text=something
// index.html?search_text=something&use_option_x=true
// index.html?use_option_x=true
// index.html?page=2&search_text=something
// index.html?page=2&per_page=5&search_text=something
//
// etc...
// Filtering/Query
$scope.filters = {}
$scope.filters.search_text = null
$scope.filters.use_option_x = null
// Pagination
$scope.pagination = {
page: 1,
per_page: 5
}
$scope.changePage = function (page) {
$location.search('page', page);
$scope.pagination.page = page; // DONT WANT TO HAVE TO DO THIS
}
});
<!DOCTYPE html>
<html ng-app="testapp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="http://code.angularjs.org/1.2.10/angular.js"></script>
<script src="http://code.angularjs.org/1.2.10/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Pagination: {{pagination}}</p>
<p>Filters: {{filters}}</p>
<label>
Search:
<input type="text" value="" ng-model="filters.search_text" placeholder="Search Text">
</label>
<label>
Other Thing:
<input type="checkbox" ng-model="filters.use_option_x">
</label>
<p>
<span class="link" ng-class="{'page-on': pagination.page == 1}" ng-click="changePage(1)">Page 1</span>
<span class="link" ng-class="{'page-on': pagination.page == 2}" ng-click="changePage(2)">Page 2</span>
<span class="link" ng-class="{'page-on': pagination.page == 3}" ng-click="changePage(3)">Page 3</span>
</p>
</body>
</html>
/* Put your css in here */
.page-on {
font-style: bold;
}
.link {
text-decoration: underline;
cursor: pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment