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 ...
随机推荐
- GIT ON WINDOWS
https://help.github.com/articles/generating-an-ssh-key/
- flask 程序结构概括
以此结构为例,这个小项目是<Flask Web开发:基于python的web应用开发实战>第一部分结束后的代码框架 第一层 有app.tests.migrations三个文件夹和confi ...
- iOS开发UI篇—ios应用数据存储方式（XML属性列表-plist）
iOS开发UI篇—ios应用数据存储方式(XML属性列表-plist) 一.ios应用常用的数据存储方式 1.plist(XML属性列表归档) 2.偏好设置 3.NSKeydeArchiver归档(存 ...
- Ubuntu 中文输入法安装包
1. 打开 Dashboard http://www.2cto.com/os/201207/144189.html
- Rhel6-puppet集中配置管理系统配置文档
puppet 是一个配置管理工具, 典型的, puppet 是一个 C/S 结构, 当然,这里的 C 可以有很多,因 此,也可以说是一个星型结构. 所有的 puppet 客户端同一个服务器端的 pup ...
- nopcommerce 初学2
好久没有接触nopcommerce了. 2016-9-5 现在最新的是3.8. 这段时间也稍微接触了下aspnet 的mvc. 所以就想到nop是一个开源的 很全得项目, 然后就拆了一些可以学习跟借 ...
- AsyncTask的基本使用和各个参数的说明
AsyncTask 的执行分为四个步骤,每一步都对应一个回调方法,需要注意的是这些方法不应该由应用程序调用,开发者需要做的就是实现这些方法.在任务的执行过程中,这些方法被自动调用. * onPreEx ...
- tinyXML的用法，用于解析gpx文件
tinyxml是一个开源的C++xml解析工具集,简单.轻量而又高效,所以对于处理xml文件是一个非常不错的选择. 由于它开源,所以可以方便地免费下载,下载地址百度一下很容易找到,这里就不多说了. 下 ...
- 如何重新安装DEDECMS织梦系统
重装的方法: 1.找到安装目录\install\index.php.bak文件,改名为index.php: 2.删除安装目录\install\install_lock文件:
- ubuntu install wine
1 install sUdo add-apt-repository ppa:wine/wine-builds sudo apt-get update sudo apt-get install wine ...