zoukankan      html  css  js  c++  java
  • Angular pagination分页模块 只提供分页参数处理 不处理分页记录数据

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>angular demo-9 分页功能</title>
     6     <script src="../plugins/angularjs/angular.min.js"></script>
     7 
     8     <!-- 分页插件 -->
     9     <link href="../plugins/angularjs/pagination.css">
    10     <script src="../plugins/angularjs/pagination.js"></script>
    11     <!-- 分页插件/ -->
    12 
    13     <script>
    14         var demo = angular.module("demoModule", ['pagination']);
    15         demo.controller("demoController", function ($scope, $http) {
    16             $scope.paginationConf = {
    17                 currentPage: 1,
    18                 itemsPerPage: 2,
    19                 totalItems: 10,
    20                 onChange: function () {
    21                     // alert("变了");
    22                     console.log("变了");
    23                 }
    24             };
    25             /*
    26                 pagination功能特点:
    27                     1.双向绑定
    28                         改变相应的变量,则分页条就会发生相应的改变。
    29                         currentPage itemsPerPage totalItems都是双向绑定的
    30                     改变一个就会改变了
    31                     2.并不处理记录数据,页面记录数据的更新必须由我们自己完成。
    32                注意:
    33                     pagination功能和记录数据显示完全没有关系,只提供分页参数处理。
    34                 面记录数据的更新必须由我们自己完成
    35              */
    36             $scope.increTotalItems = function(){
    37                 console.log($scope.paginationConf.totalItems);
    38 
    39                 $scope.nameList.push( "刘备" + $scope.nameList.length);
    40                 $scope.paginationConf.totalItems = $scope.nameList.length;
    41 
    42                 // $scope.paginationConf.totalItems = $scope.paginationConf.totalItems + 1;
    43                 console.log($scope.paginationConf.totalItems);
    44             };
    45 
    46             $scope.nameList = ["孙权", "刘备", "曹操", "大乔", "小乔"];
    47 
    48         });
    49     </script>
    50 
    51 </head>
    52 <body ng-app="demoModule" ng-controller="demoController">
    53 
    54     <!--<p ng-repeat="name in nameList">{{name}}</p>-->
    55 
    56     <table>
    57         <tr ng-repeat="name in nameList" ng-model="nameList">
    58             <td>{{name}}</td>
    59         </tr>
    60     </table>
    61 
    62     <input type="button" ng-click="increTotalItems()" value="自增">
    63     <input ng-model="paginationConf.currentPage">
    64     <input ng-model="paginationConf.itemsPerPage">
    65 
    66     <tm-pagination conf="paginationConf"></tm-pagination>
    67 </body>
    68 </html>
    Angular pagination分页模块
  • 相关阅读:
    峰Spring4学习(1)HelloWorld
    小峰mybatis(5)mybatis使用注解配置sql映射器--动态sql
    前端实现某一列不能重复不能且不能为空
    jquery:给正则表达式添加变量
    css:width height
    让heigh:100%起作用
    jquery:选择器 过滤器
    vs:如何添加.dll文件
    jq:正则表达式
    css:html() text() val()
  • 原文地址:https://www.cnblogs.com/mozq/p/11105810.html
Copyright © 2011-2022 走看看