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 ...
随机推荐
- 004_kafka_安装运行
1.下载和安装 目前kafka的稳定版本为0.10.0.0 下载地址:http://kafka.apache.org/downloads.html 下载后解压缩安装包到系统即可完成安装 > ta ...
- 用python的BeautifulSoup分析html 【转】
原地址:http://www.cnblogs.com/twinsclover/archive/2012/04/26/2471704.html 序言 之前用python爬取网页的时候,一直用的是rege ...
- PHP 二维码解码 (读取二维码)
#zbar wget http://ncu.dl.sourceforge.net/project/zbar/zbar/0.10/zbar-0.10.tar.bz2 yum install gtk2 g ...
- HR函数学习02——分配组织单位
REPORT ZLYHR01. "创建组织单元 成功 DATA:LS_OBJ TYPE OBJEC, LV_STU TYPE GDSTR-SVECT, LV_TIT TYPE CHAR20, ...
- shell使用随笔
001 对文件某一列求和 awk '{sum += $collum};END {print sum}' /path/to/your/file 2 3 3 5 假设文件内容如上所示: # awk '{s ...
- 【64测试20161112】【Catalan数】【数论】【扩展欧几里得】【逆】
Problem: n个人(偶数)排队,排两行,每一行的身高依次递增,且第二行的人的身高大于对应的第一行的人,问有多少种方案.mod 1e9+9 Solution: 这道题由1,2,5,14 应该想到C ...
- C语言基础--二维数组
二维数组概念: 数组中的每一个元素又是一个数组, 那么这个数组就称之为二维数组,二维数组是特殊的一维数组. 二维数组格式: 元素类型 数组名称[一维数组的个数][每个一维数组的元素个数]; 元素类型 ...
- Android TextView里显示两种颜色
今天介绍一个小技巧,在Android的TextView里设置两种颜色,直接上代码: TextView TV = (TextView)findViewById(R.id.mytextview01); S ...
- iOS视图控制器的生命周期
今天面试有一道面试题因为回答不好,因为也不经常涉及所以有点模糊,我选择了最保守的回答,没有展开写出我对这个问题的理解. 问题:IOS 开发 loadView 和 viewDidLoad 的区别? 经过 ...
- 2014年5月份第1周51Aspx源码发布详情
郑州某高校学生考评系统源码 2014-5-5 [VS2008]功能介绍: 1.用户角色有部主任.教师.学生等. 2.可添加班级考评项目.学生考评项目. 3.可指定学生对班级.学生某考评项 ...