Фокус на странице AngularJS отражается в использовании фильтров. Этот фильтр тоже не сложный.
Во -первых, поместите HTML -код:
<! Doctype html> <html ng-app = "demoApp"> <Head> <meta charset = "utf-"> <meta name = "viewport" content = "width = device-width"> <Tite> demo </title> <link rel = "stylesheet" href = "demo.css> ng-controller = "democtrl"> <viv> <ul> <li ng-repeat = "предложения в демолистах []. Имя | Пейдж: CurrentPage*ListSperpage | Limitto: ListSperpage"> {{предложения}} </li> <! ng-click = "prevpage ()"> предыдущая страница </a> <a ng-class = "{true: 'currentStep', false: 'step'} [num == currentpage]" ng-repeat = "num in pagenum" ng-click = "setpage (num)"> {num+}} </a> <! ng-click = "nextpage ()"> Следующая страница </a> </div> </div> <script src = "angular.min.js"> </script> <!-Введите свой файл AngularJS-> <sript src = "demo.js"> </script> </body> </html>NG-класс используется здесь. Когда текущая страница текущая страница будет равной номеру страницы, отображается стиль текущего степа, и когда она не равна, отображается стиль шага.
Ключевой код находится в 13 строках. Когда NG-Repeat имитирует данные, фильтр называется пейджингом и угловым фильтром.
Тогда есть код CSS, нечего сказать, в основном, чтобы настроить стиль. Не забудьте добавить два стиля в NG-класс.
ul> li {list-style: none; ширина: px; высота: px; граница: px solid #caf; margin-bottom: px; padding-left: px;}. Nextlink, .prevlink {font-size: px; line-height: px; высота: px; граница: сплошной Px #aaa; #; #; px; px; px; Нет; фон: #fff; float: left; cursor: pointer;} a.prevlink: Hover, a.nextlink: Hover {founal: #aaa! PX; размер Font: PX; Float: слева; Маржа: PX; Стиль списка: Нет; Курсор: Pointer;}. CurrentStep {Border-Color: #ffff; Padding: PX; цвет: #F; font-weight: bold; float: hill: block; line-hight: px; высота: Px; Px; px; px; fon-size: px; px; px; стиль списка: нет; cursor: pointer;}Наконец, это JS
var demoApp = angular.module ('demoApp', []); demoApp.filter ('paging', function () {// Filter Filter Function (списки, start) {// Два списка параметров-это необработанные данные вашего ng-repeat в html: // start, то есть параметры. lists.slice (start); Разработчик ».,« Спасибо за чтение этого »,« Почему я говорю спасибо »,« Потому что это не имеет ничего общего с изучением ваших Angularjs »,« Это просто демонстрационные предложения ».,« Не имеет никаких особых значений »,« И вы все еще потратите время на чтение этого ряда по ряду »,« Что я могу сказать? »,« Хорошо. $ scope.demolists []. i =; i <$ scope.pages; i ++) {$ scope.pagenum.push (i);} $ scope.currentpage =; Страницы} $ scope.prevpage = function () {// Нажмите на функцию, выполненную на предыдущей странице if ($ scope.currentpage>) {$ scope.currentpage-;}}} $ scope.nextpage = function () {// Нажмите на функцию, выполненную на следующей странице, если ($ scope.currentpage <) {// Нажмите функцию, выполненную на следующей странице. $ scope.pages-) {$ scope.currentpage ++;}}}]);Я хочу сказать, что генерируем, который вы генерируете, начинается с 0, но реальные номера страниц начинаются с самого начала, поэтому именно поэтому 18 строк в HTML являются NUM +1.
Вышеуказанный контент - это код, который AngularJS реализует функцию пейджинга без ellipsis, представленного редактором. Надеюсь, это может вам помочь. Если вы хотите узнать больше об AngularJS, пожалуйста, обратите внимание на веб -сайт wulin.com!