angular+bootstrap+MVC 之三，分页控件初级版
今天实现一个分页控件，效果如下：
1、HTML：
<!doctype html>
<!--suppress ALL -->
<html ng-app="appTow">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta content="always" name="referrer">
<script src="angular.min.js"></script>
<script src="./Script/jquery-2.1.1.min.js"></script>
<link href="./Content/Plus/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="./Content/Plus/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<link href="./Skin/Default/css/site.css" rel="stylesheet"/>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MyController">
Your name:
<input type="text" ng-model="username">
<button ng-click='sayHello()'>greet</button>
<hr>
{{greeting}}
</div>
<div ng-controller="MyController1">
Your name:
<input type="text" ng-model="username">
<button ng-click='sayHello()'>greet</button>
<li ng-repeat="x in names" ng-click="clickOneLi(x.Name,$index)">
{{ x.Name}}
</li>
<table>
<tr>
<td class="ruyeeTableTDLable"><span>Names</span></td>
<td class="ruyeeTableDataCell">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
aria-expanded="false">
<span>{{selectedItem}}</span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="x in names">
<a href="#" ng-click="clickOneLi(x.Name,$index)">{{ x.Name}}</a>
</li>
</ul>
</div>
</td>
</tr>
</table>
<button ng-click='modal_showModal()'>showModal</button>
<div class='modal fade'
tabindex='-1'
role='dialog'
aria-labelledby='myModalLabel'
aria-hidden='true'
id="myModal">
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'>
<span aria-hidden='true'>×</span>
<span class='sr-only'>关闭</span></button>
<h4 class='modal-title' id='myModalLabel'>
<span>系统提示</span>
</h4>
</div>
<div class='modal-body'>
<span>{{modal_selectedId}}:{{selectedItem}}</span>
</div>
<div class='modal-footer'>
<button type='button' data-dismiss='modal' class='btn btn-primary'>
取消
</button>
<button type='button' data-dismiss='modal' class='btn btn-primary'
ng-click='modal_okAction(modal_selectedId)'>
确定
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<input class="btn btn-success pageBtn" type="button" value="<" ng-click="perPageClick()"/>
</div>
<div class="btn-group">
<input "/>
</div>
<div class="btn-group">
<button ng-repeat="x in btns" class="btn btn-success pageBtn" type="button"
ng-click="$parent.btnClick(x.data)">
{{x.data}}
</button>
</div>
<div class="btn-group">
<button class="btn btn-success pageBtn" type="button" ng-click="lastPageClick()">
{{pageTotal}}
</button>
</div>
<div class="btn-group">
<input class="btn btn-success pageBtn" type="button" value=">" ng-click="nextPageClick()"/>
</div>
<div class="btn-group">
<span class="badge">{{totalCount}}</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2、JS：
// modal窗体封装
function modalWindow(angularObj, modalId, okAction) {
angularObj.modal_selectedId = "-1";
angularObj.modal_showModal = function () {
$('#' + modalId).modal();
}
angularObj.modal_okAction = function (item) {
if (typeof okAction == 'function')
okAction(item);
}
}
function pagedButtons(self) {
self.totalCount = 100;
self.perCount = 10;
self.pageIndex = 1;
self.btns = [{"data":"1"},{"data":"2"},{"data":"3"}];
self.pageTotal=10;
self.getData=function(wantIndex)
{
console.log("wantIndex>>"+wantIndex)
}
self.btnClick=function(item){
self.getData(item);
}
self.perPageClick = function () {
var wantIndex = self.pageIndex - 1;
if (wantIndex <= 0) return;
self.getData(wantIndex);
}
self.nextPageClick = function () {
var wantIndex = self.pageIndex + 1;
if (wantIndex - 1 > (self.totalCount / self.perCount)) return;
self.getData(wantIndex);
}
self.firstPageClick = function () {
self.getData(1);
}
self.lastPageClick = function () {
self.getData(self.pageTotal);
}
}
angular.module('appOne', [])
.controller('MyController',
function ($scope) {
$scope.username = 'World';
$scope.sayHello = function () {
$scope.greeting = 'Hello ' + $scope.username + '!';
};
});
angular.module('appTow', ['appOne'])
.controller('MyController1',
function ($scope, $http) {
$scope.username = 'World002';
$scope.sayHello = function () {
$http.get("Data.json")
.success(function (response) {
$scope.names = response;
});
};
$scope.clickOneLi = function (item, index) {
$scope.selectedItem = item;
$scope.modal_selectedId = index;
$('#myModal').modal();
}
$scope.selectedItem = "Please select one";
/*region modal窗体*/
/*
// modal窗体简单实现
$scope.modal_selectedId="-1";
$scope.modal_showModal=function(){
$('#myModal').modal();
}
$scope.modal_okAction=function(id)
{
alert(id);
}
*/
$scope.cc="cc";
pagedButtons($scope);
modalWindow($scope, 'myModal', function (_) {
alert(_);
})
/*endregion modal窗体*/
});
angular+bootstrap+MVC 之三，分页控件初级版的更多相关文章
- 基于KO+bootstrap+MVC的分页控件
JS: /// <reference path="../knockout-3.2.0.js" /> var ViewModel = function (data) { ...
- 基于存储过程的MVC开源分页控件--LYB.NET.SPPager
摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件MVCPager(http://www.webdiyer.com/)算 ...
- 一个Bootstrap风格的分页控件
http://www.cnblogs.com/wangwei123/p/3682626.html 主题 jQueryBootstrap 一个Bootstrap风格的分页控件,对于喜欢Bootstr ...
- 基于存储过程的MVC开源分页控件
基于存储过程的MVC开源分页控件--LYB.NET.SPPager 摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件M ...
- Mvc自定义分页控件
MVC开发分页常常使用第三方控件,生成的分页HTML带有版权申明,虽然免费,但是总有的别扭.于是,某日,楼主闲来蛋疼,折腾了个自定义分页控件: 先来展示下效果图: 1>当分页不超过10页的时候, ...
- Net MVC轻量级分页控件
JPager.Net MVC超好用轻量级分页控件 JPager.Net MVC好用的轻量级分页控件,好用到你无法想象,轻量到你无法想象. JPager.Net MVC好用的轻量级分页控件,实现 ...
- MVC Page分页控件
MVCPage帮助类 控制器代码 public ActionResult Article(int? page) { //Session["ArticleClass"] = cont ...
- 使用 Vue.js 结合bootstrap 实现的分页控件
原文链接:http://blog.csdn.net/qiuhaotc/article/details/53031884 源码下载: http://pan.baidu.com/s/1i4XgH6H 密码 ...
- MvcPager分页控件以适用Bootstrap
随笔- 9 文章- 0 评论- 33 修改MvcPager分页控件以适用Bootstrap 效果(含英文版,可下载) 软件开发分页效果必不可少,对于Asp.Net MVC 而言,MvcPag ...
随机推荐
- matlab实现感知机算法--统计学习小灶
clear all; clc; %% %算法 %输入:训练数据集T = {(x1,y1),(x2,y2),...,(xn,yn)};学习率η %输出:w,b;感知机模型f(x) = sign(w*x+ ...
- ASCII十进制字符集
<script> for(var i=33;i<=6000;i++){ document.write(" "+i+"  ...
- CSS选择器和jQuery选择器的区别与联系之一
到底什么是选择器?我们通过常接触的CSS选择器和jQuery选择器理解一下,我们知道CSS是用于分离网页的结构和表现的,也就是说对于一个网页,HTML定义网页的结构,CSS描述网页的样子,一个很经典的 ...
- js面向对象选项卡
window.onload=function() //面向对象 { var tab=new tabSwitch("div1"); var tab=new tabSwitch(&qu ...
- erlang中的lists：foldl()的用法,格式转换实例应用
lists:foldl(fun(),参数1,参数2):这个函数就是先把参数1传给fun()处理,然后将参数2(列表)中每一个元素,依次传给fun()函数进行处理. lists:foldl(fun(El ...
- AngularJs的UI组件ui-Bootstrap分享（三）——Accordion
Accordion手风琴控件使用uib-accordion和uib-accordion-group指令. <script> angular.module('myApp', ['ui.boo ...
- SQL升级脚本实现按版本差异化升级
目前的项目里面,升级脚本是一个SQL文件,无论软件从哪个版本升级,都会把SQL文件里面的语句全部执行一遍,这样存在两个问题: 1.SQL升级文件很庞大,几M很常见,导致文件的加载很慢: 2.重复执行脚 ...
- Python的平凡之路（5）
一.模块介绍 定义: 模块--用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能),本质就是.py结尾的python文件(文件名test.py,模块名test) 包—用来从逻辑上组织 ...
- 多比(SVG/VML)图形控件多比(SVG/VML)图形拓扑图控件免费下载地址
多比图形控件是一款基于Web(VML和SVG技术)的矢量图形控件, 类似于网页上的Visio控件拓扑图软件,是目前国内外最佳的基于web的工作流设计器.工作流流程监视器解决方案. 可广泛应用于包括:电 ...
- 关于if(a<b<c)判断的问题
由于判断时的执行顺序,不要写成if(a<b<c)这种形式,很有可能得出的结果与我们想像的结果不一致,要写成if(a<b && b<c)!