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


目录
相关文章
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
539 1
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
|
机器学习/深度学习 数据采集 数据可视化
基于爬虫和机器学习的招聘数据分析与可视化系统,python django框架,前端bootstrap,机器学习有八种带有可视化大屏和后台
本文介绍了一个基于Python Django框架和Bootstrap前端技术,集成了机器学习算法和数据可视化的招聘数据分析与可视化系统,该系统通过爬虫技术获取职位信息,并使用多种机器学习模型进行薪资预测、职位匹配和趋势分析,提供了一个直观的可视化大屏和后台管理系统,以优化招聘策略并提升决策质量。
742 4
|
10月前
|
前端开发 安全 API
Qwen-coder实现本地 RAG 框架能力Bootstrap
本文介绍了如何利用Qwen-coder在本地实现RAG框架能力提升,解决了企业知识库管理中的数据安全和半结构化文档处理问题。通过Qwen2.5-72b模型和多轮对话推理,成功实现了对包含图表内容的文档的高效预处理,提升了知识库检索的准确性和安全性。
|
12月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
264 2
|
12月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
1347 1
|
12月前
|
数据可视化 前端开发 搜索推荐
FLEX组件可视化设计器CSS3代码生成器
FLEX组件可视化设计器CSS3代码生成器
158 4
|
搜索推荐 前端开发 数据可视化
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
本文介绍了一个基于Python协同过滤算法的旅游景点推荐系统,该系统采用Django框架、MySQL数据库、Bootstrap前端和echarts数据可视化技术,旨在为用户提供个性化的旅游推荐服务,提升用户体验和旅游市场增长。
1507 9
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
730 4
|
搜索推荐 前端开发 算法
基于用户画像及协同过滤算法的音乐推荐系统,采用Django框架、bootstrap前端,MySQL数据库
本文介绍了一个基于用户画像和协同过滤算法的音乐推荐系统,使用Django框架、Bootstrap前端和MySQL数据库构建,旨在为用户提供个性化的音乐推荐服务,提高推荐准确性和用户满意度。
876 7
基于用户画像及协同过滤算法的音乐推荐系统,采用Django框架、bootstrap前端,MySQL数据库
|
前端开发 JavaScript