<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. [ An Ac a Day ^_^ ] hdu 1662 Trees on the level 数据结构 二叉树

    紫书上的原题 正好学数据结构拿出来做一下 不知道为什么bfs的队列一定要数组模拟…… 还可以练习一下sscanf…… #include<stdio.h> #include<iostr ...

  2. 1bpp像素遍历(找了半天，感谢github)

    /// <summary> /// 获取比例 /// </summary> /// <param name="rect"></param& ...

  3. SQL函数学习（四）：charindex()函数

    秒懂例子: CHARINDEX('SQL', 'Microsoft SQL Server') 返回11: CHARINDEX('7.0', 'Microsoft SQL Server 2000') 返 ...

  4. Zookeeper 启动错误

    启动后日志如下 : 2016-09-14 05:51:19,449 [myid:1] - INFO [QuorumPeer[myid=1]/0:0:0:0:0:0:0:0:2181:FastLeade ...

  5. MVC view视图获取Html.RenderAction方式带来的参数

    通过Html.RenderAction这种方式传递的参数,在view视图中获取要使用viewContext上下文来获取:Html.ViewContext.RouteData.Values[" ...

  6. vb6加载时提示出错，窗体log文件中错误信息为：控件 XX 的类 MSComctlLib.ListView 不是一个已加载的控件类。

    解决办法:单击[工程] -- [部件] 添加此Microsoft Windows Common Controls-6.0 (SP6)部件,如果列表中没有,浏览到~\project\包\Support中 ...

  7. mac中Eclipse的快捷键

    查看某个类:command + shift +T 快速查看源代码中方法: command + o 选中某个类,command + t:查看此类的父类和子类 如果要导入一个类所在的包名,可以选中这个类, ...

  8. SqlSever 查询基本

    查询语句: SQL sever 查询语句: 1.查询所有字段: select * from UserInfo 2.条件筛选 (如查询UserInfo中的UserName) select UserNam ...

  9. HDU--1301--Jungle Roads（最小生成树）

    Problem Description The Head Elder of the tropical island of Lagrishan has a problem. A burst of for ...

  10. android CTS测试

    CTS认证是获得Google推出的Android系统中Android Market服务的前提 CTS兼容性测试的主要目的和意义在于使得用户在Android系统的应用过程中,有更好的用户体验,并展现出A ...