<html>

   <head>

     <meta charset='utf-8'>

     <script src="js/angular.js"></script>

     <script src="js/app.js"></script>

     <link rel="stylesheet" href="css/bootstrap.css">

   </head>

   <body ng-app="MyApp">

     <div ng-controller="PaginationCtrl">

       <table class="table table-striped">

         <thead>

           <tr>

             <th>Id</th>

             <th>Name</th>

             <th>Description</th>

           </tr>

         </thead>

         <tbody>

           <tr ng-repeat="item in items | offset: currentPage*itemsPerPage | limitTo: itemsPerPage">

             <td>{{item.id}}</td>

             <td>{{item.name}}</td>

             <td>{{item.description}}</td>

           </tr>

         </tbody>

         <tfoot>

           <td colspan="3">

             <div class="pagination">

               <ul>

                 <li ng-class="prevPageDisabled()">

                   <a href ng-click="prevPage()">« Prev</a>

                 </li>

                 <li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)">

                   <a href="#">{{n+1}}</a>

                 </li>

                 <li ng-class="nextPageDisabled()">

                   <a href ng-click="nextPage()">Next »</a>

                 </li>

               </ul>

             </div>

           </td>

         </tfoot>

       </table>

     </div>

   </body>

 </html>
 var app = angular.module("MyApp", []);

 app.filter('offset', function() {

   return function(input, start) {

     start = parseInt(start, 10);

     return input.slice(start);

   };

 });

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

   $scope.itemsPerPage = 5;

   $scope.currentPage = 0;

   $scope.items = [];

   for (var i=0; i<; i++) {

     $scope.items.push({ id: i, name: "name "+ i, description: "description " + i });

   }

   $scope.range = function() {

     var rangeSize = 5;

     var ret = [];

     var start;

     start = $scope.currentPage;

     if ( start > $scope.pageCount()-rangeSize ) {

       start = $scope.pageCount()-rangeSize+1;

     }

     for (var i=start; i<start+rangeSize; i++) {

       ret.push(i);

     }

     return ret;

   };

   $scope.prevPage = function() {

     if ($scope.currentPage > 0) {

       $scope.currentPage--;

     }

   };

   $scope.prevPageDisabled = function() {

     return $scope.currentPage === 0 ? "disabled" : "";

   };

   $scope.pageCount = function() {

     return Math.ceil($scope.items.length/$scope.itemsPerPage)-1;

   };

   $scope.nextPage = function() {

     if ($scope.currentPage < $scope.pageCount()) {

       $scope.currentPage++;

     }

   };

   $scope.nextPageDisabled = function() {

     return $scope.currentPage === $scope.pageCount() ? "disabled" : "";

   };

   $scope.setPage = function(n) {

     $scope.currentPage = n;

   };

 });

简易控制中心，angular的简单使用的更多相关文章

  1. Dubbo简易控制中心安装

    1. zookeeper安装(单机版):http://www.cnblogs.com/wangfajun/p/5251159.html  √ 2. dubbo管控台安装(zookeeper单机版):h ...

  2. 2018年 js 简易控制滚动条滚动的简单方法

    首先是es2015 的新api Element.scrollIntoView() // 滚动到最上方 等同于 dom.scrollIntoView(true) Element.scrollIntoVi ...

  3. 3.2 配置构建Angular应用——简单的笔记存储应用

    本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...

  4. 3.2.1 配置构建Angular应用——简单的笔记存储应用——展示功能

    本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...

  5. Atitit 控制中心快速启动面板quick launcher

    Atitit 控制中心快速启动面板quick launcher contralPanel.bat aaaControlPanel.contrlx /AtiPlatf_auto/src_atibrow/ ...

  6. Heritrix源码分析(十三) Heritrix的控制中心(大脑)CrawlController(二)

    本博客属原创文章,欢迎转载!转载请务必注明出处:http://guoyunsky.iteye.com/blog/650744      本博客已迁移到本人独立博客: http://www.yun5u. ...

  7. 【转】预装Win8/8.1 中文版系统升级为专业版或专业版含媒体中心版的简单方法

    [转]预装Win8/8.1 中文版系统升级为专业版或专业版含媒体中心版的简单方法 原文地址:http://www.iruanmi.com/upgrade-win8-china-to-a-higher- ...

  8. 3.2.1 配置构建Angular应用——简单的笔记存储应用——编辑功能

    本节我们会接着上节课的内容,继续来完成使用Angular来创建简单的笔记存储应用,上一节课,我们完成了笔记的展示功能,本节课,我们来完成编辑功能. 编辑主要是两个功能:编辑现有的笔记以及创建新笔记.首 ...

  9. Angular实现简单数据计算与删除

    AngularJS 1)什么是AngularJS AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. ...

随机推荐

  1. HDU 1372 Knight Moves(BFS)

    题目链接 Problem Description A friend of you is doing research on the Traveling Knight Problem (TKP) whe ...

  2. 【Machine Learning in Action --5】逻辑回归（LogisticRegression）

    1.概述 Logistic regression(逻辑回归)是当前业界比较常用的机器学习方法,用于估计某种事物的可能性. 在经典之作<数学之美>中也看到了它用于广告预测,也就是根据某广告被 ...

  3. 杭电1002 Etaoin Shrdlu

    Problem Description The relative frequency of characters in natural language texts is very important ...

  4. Understanding Neural Networks Through Deep Visualization

    当数据一层一层通过更多的卷积层时,你可以得到的特征图像代表的特征就会更加的复杂. 在网络的最后,你也许可以得到一个抽象的物体.如果你想通过可视化方法在卷积神经网络中看到更多的信息.这里有一个工具方便你 ...

  5. python2.7学习记录之四

    1.从raw_input()读取的内容永远以字符串的形式返回,把字符串和整数比较就不会得到期待的结果,必须先用int()把字符串转换为我们想要的整型 2.list增加元素 为 append() 3.d ...

  6. 第三十六节，os系统级别操作模块

    在使用os模块时需要先 import os 引入模块 os.getcwd()模块函数 功能:获取当前工作目录,即当前python脚本工作的目录路径[无参] 使用方法:os.getcwd() 格式如:a ...

  7. find文件后cp、rm

    复制: find <src-path> -name 'some names' -exec cp {} <dest-path> \; find <src-path> ...

  8. luci 随笔

    entry()函数, 第一个参数是定义菜单的显示(Virtual path). 第二个参数定义相应的处理方式(target). alias是指向别的entry的别名,from调用的某一个view,cb ...

  9. 5.如果第4题中在DOS命令下输入：java Hello 出现以下结果：Bad command or the file name 可能是什么原因？请说明理由。

    1.没有输入javac指定路径,而是直接输入java Hello. 2.前面已经用过一次指令,没有重新输入路径.

  10. CTRL key

    ctrl key其实是用于扩展键盘,单独一个ctrl键没有什么作用,也没有ascii码,当与其他键相结合时,相当于创造出一个新键.例如:用getchar()侦测输入的字符,当按下ctrl+a时,只输出 ...