angular定制组件-bootstrap(css框架)

需要的文件

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);
};