<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. Leetcode 074 Search a 2D Matrix

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  2. Program Files 与Program Files (x86)

    在64位系统下,为了更好的兼容32位程序,在安装一些32位程序(注意某些程序他就是32位的),会默认扔到program files(x86)这个文件夹下,而一些64位的程序,或程序本身没有位数区别的, ...

  3. Mysql CPU占用高的问题解决方法小结

    通过以前对mysql的操作经验,先将mysql的配置问题排除了,查看msyql是否运行正常,通过查看mysql data目录里面的*.err文件(将扩展名改为.txt)记事本查看即可.如果过大不建议用 ...

  4. python crypto

    //安装crypto sudo apt-get install python-pip//安装pip命令工具 sudo pip install pycrypto//缺少环境-- sudo apt-get ...

  5. 《JavaScript高级程序设计》读书笔记 ---操作符一

    一元操作符只能操作一个值的操作符叫做一元操作符.一元操作符是ECMAScript 中最简单的操作符. 1. 递增和递减操作符递增和递减操作符直接借鉴自C,而且各有两个版本:前置型和后置型.顾名思义,前 ...

  6. C中内存分配方式[转载]

    在C 中,内存分成5个区,他们分别是堆.栈.自由存储区.全局/静态存储区和常量存储区. 一．简介: 1．栈,就是那些由编译器在需要的时候分配,在无需的时候自动清除的变量的存储区.里面的变量通常是局部变 ...

  7. Windows下为Python编译C扩展模块

    工具:CodeBlocks 13.12 步骤 1 打开CodeBlocks新建工程:Shared library   --   c    --  sample    [默认GUN GCC Compli ...

  8. .NET WinForm程序中给DataGridView表头添加下拉列表实现数据过滤

    转:http://www.cnblogs.com/jaxu/archive/2011/08/04/2127365.html 我们见过Excel中的数据过滤功能,可以通过点击表头上的下拉列表来实现数据的 ...

  9. JavaScript高级程序设计：第十七章

    错误处理与调试 一.错误处理 1.try-catch语句: ECMA-262第3版引入了try-catch语句,作为javascript中处理异常的一种标准方式.基本的语法如下: try { //可能 ...

  10. 使用SpringSecurity3用户验证(异常信息，验证码)

    1. 自定义user-service后,封装自定义异常信息返回 通常情况下,抛UsernameNotFoundException异常信息是捕捉不了,跟踪源码后发现 try { user = retri ...