angular定制组件-bootstrap(css框架)-阿里云开发者社区

开发者社区> 开发与运维> 正文

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

简介: 需要的文件 bootstrap.css ui-bootstrap-tpls.js 模态框 angular定制的bootstrap的模态框,可以方便地将视图与控制器绑定。 模块的定义与模块的控制器: //定义模块时引入依赖 angular .module('myApp', [ 'ui.bootstrap' ]); //定义控制器时传入依赖 angu

需要的文件

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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章