需要的文件
bootstrap.css
ui-bootstrap-tpls.js
模态框
angular定制的bootstrap的模态框，可以方便地将视图与控制器绑定。
模块的定义与模块的控制器：
//定义模块时引入依赖
angular
.module('myApp', [
'ui.bootstrap'
]);
//定义控制器时传入依赖
angular.module('myApp')
.conroller('MenuCtrl', function ($scope,$modal) {
//打开模态框，修改某条数据
$scope.modifyModal = function (channel) {
return $modal.open({
//模态框的样式
templateUrl: 'views/channel/modifyChannel.html',
size: 'lg',
backdrop: 'static',
//指定模态框范围内的控制器
controller: 'ChannelAddOrModifyCtrl',
//给模态框控制器的依赖传参
resolve: {
channel: function () {
return channel;
},
action:function(){
return 'modify';
}
}//resolve
});
};
});
模态框的控制器：
'use strict';
angular.module('myApp')
//注意$modalInstance为库里的，channel与action是传参过来的
.controller('ChannelAddOrModifyCtrl', function ($scope, $modalInstance, $log,$http,toastr, PathUtil,channel,action) {
if (action=='add') {
var data = {
name:"",
displayName:"",
description:"",
whereStr:""
}
$scope.channel = data;
} else {
$scope.channel = channel
}
$log.debug('init', $scope.channel);
$scope.ok = function () {
var postData= $scope.channel;
//增
if(action=='add'){
$http.post(PathUtil.getUrl('channel'),postData)
.success(function(data) {
if(data=='true')
toastr.success('ok');
})
.error(function(){toastr.error('error')});
}
//改
else{
$http.post(PathUtil.getUrl('channel/modify?'+postData.id),postData).success(function(data) {
if(data=='true')
toastr.success('ok');
}).error(function(){toastr.error('error')});
}
$modalInstance.close( );
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
模态框的视图：
<div class="modal-header">
<h3 class="modal-title">修改</h3>
</div>
<div class="modal-body auto-height-body">
<form name="form" novalidate class="form-horizontal" role="form">
<div>
<label class="control-label"> 频道</label>
<input name="name" placeholder="频道标识（请使用英文）" maxlength="4085" class="form-control"
ng-model="channel.name" ng-disabled="true" required/>
</div>
<div>
<label class="control-label"> 频道中文</label>
<input name="title" maxlength="4085" class="form-control"
ng-model="channel.displayname" ng-disabled="true" required/>
</div>
<div>
<label class="control-label">描述</label>
<input name="datasourceapp" placeholder="此业务线的描述信息" maxlength="4085" class="form-control"
ng-model="channel.description"/>
</div>
<div>
<label>频道定义</label>
<textarea class="form-control" placeholder="在此输入业务线where条件" ng-model="channel.whereStr"></textarea>
</div>
</form>
</div>
<div ng-include="'views/commonEditOKCancelBar.html'"></div>
为了复用模态框的底部，所以写了单独的html：
<!-- commonEditOKCancelBar.html -->
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">保存</button>
<button class="btn btn-warning" ng-click="cancel()">关闭</button>
</div>
图1 模态框的显示效果
标签集合tabset
当下拉列表中的元素太多，感觉使用不方便时，就可以用胶囊标签展开。
<tabset>
<tab ng-repeat="channel in channelList"
heading="{{channel.displayName}}"
select="getCounterList(channel.name)">
</tab>
</tabset>heading：标签内容。
select： 选中这个标签的回调函数。
样式见图2.
图2 <tabset> 效果
分页 pagination
angular封装了pagination指令，在ui-bootstrap-tpls.js文件中。
分页效果见图3，还是很棒的，第1页时，Previous自动禁用，最后一页时也一样。
图 3 分页效果
html代码;
<!-- 分页 --> <pagination total-items="pageModel.total" <!-- 元素（表中的列）总个数 --> items-per-page="pageModel.pageSize"<!-- 每个页面展示的元素个数。angular根据这个和上个计算页数 --> ng-model="pageModel.page"<!--数据绑定，值为1,2,3,...--> ng-change="pageChanged(pageModel.page)"><!--点击具体页码要靠自定义的pageChanged()刷新数据--> </pagination>
js代码：
// 分页信息
$scope.pageModel = {
total : $scope.counterList.length,//数组长度
pageSize : 10,
page : 1//默认从第1页开始
};
$scope.pageChanged = function(index) {
// index表示页码，从1起
index--;
var beginIndex = index * $scope.pageModel.pageSize;
$scope.counterPageList = $scope.counterList.slice(//$scope.counterList是一次性拉取的全量
beginIndex, beginIndex
+ $scope.pageModel.pageSize);
};