用angularJS实现Bootstrap的“手风琴”
主页面代码（发现Bootstrap官网上手风琴的实例样式有问题，在这里依然使用3.0.~版本）
<!DOCTYPE html>
<html ng-app="ct">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.css"/>
<link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap-r.css"/>
</head>
<body>
<hr>
<div class="container" ng-controller="c1">
<kittencup-group>
<kittencup-collapse ng-repeat="collapse in Data" head="collapse.a">
<span ng-bind="collapse.b"></span>
</kittencup-collapse>
</kittencup-group>
</div>
</body>
<script src="../angular.js"></script>
<script>
var app = angular.module("ct",[]);
app.factory("Data",function(){
return [
{
a:"错你妹啊",
b:"contents1"
},
{
a:"title2",
b:"contents2"
}
]
});
app.controller("c1",['$scope','Data', function($scope,Data){
//由ctrl拿到数据加载给view
$scope.Data = Data;
}]);
app.directive('kittencupGroup', function(){
return {
restrict:"EA",
transclude:true,
replace:true,
template:"<div class='panel-group' ng-transclude></div>",
controller:function(){
this.collapseGroup = [];
this.otherClose = function(currCollaps){
angular.forEach(this.collapseGroup, function(collaps){
if(collaps !== currCollaps){
collaps.isOpen = true;
}
});
}
}
}
});
app.directive('kittencupCollapse', function(){
return {
restrict:"EA",
require:"^kittencupGroup",
replace:true,
templateUrl:"templates/contents.html",
transclude:true,
scope:{
head:"="
},
link: function(scope, elements, attrs, superCtrl){
scope.isOpen = true;
scope.open = function(){
scope.isOpen = !scope.isOpen;
superCtrl.otherClose(scope);
};
superCtrl.collapseGroup.push(scope);
}
}
});
</script>
</html>
模板代码：
<div class="panel panel-default">
<div class="panel-heading" ng-click="open()">
<h4 class="panel-title">
<a href="#collapseOne">
<span ng-bind="head"></span>
</a>
</h4>
</div>
<div class="panel-collapse" ng-class="{collapse: isOpen}">
<div class="panel-body" ng-transclude>
</div>
</div>
</div>
用angularJS实现Bootstrap的“手风琴”的更多相关文章
- Angular.js+Bootstrap实现手风琴菜单
说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...
- Angularjs与bootstrap.datetimepicker结合实现日期选择器
http://www.lovelucy.info/angularjs-best-practices.html http://damoqiongqiu.iteye.com/blog/1917971 ht ...
- AngularJs + angular-ui-router + bootstrap 实现blog基础导航功能
AngularJs + angular-ui-router + bootstrap 实现blog基础导航功能 核心代码如下 1.index.html <!DOCTYPE html> < ...
- AngularJS中bootstrap启动
对于一般的使用者来说,AngularJS的ng-app都是手动绑定到某个dom元素.但是在一些应用中,这样就显得很不方便了 绑定初始化 通过绑定来进行angular的初始化,会把js代码侵入到html ...
- 新建一个angularjs+requirejs+bootstrap+typescript+gulp+vscode+git的项目
环境 windows 10 准备工具 Visual Studio Code Node.js Git 需求 必须支持IE8 步骤开始: 执行命令行工具 mkdir Demo && cd ...
- angularjs封装bootstrap官网的时间插件datetimepicker
背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...
- AngularJS(12)-BootStrap集成
AngularJS 的首选样式表是 Bootstrap, Bootstrap 是目前最受欢迎的前端框架. <!DOCTYPE html> <html lang="en&qu ...
- bootstrap实现手风琴功能(树形列表)
首先把架包拷进项目,然后在页面中引进css,js <script src="js/jquery/jquery-2.1.1.min.js"></script> ...
- AngularJS 和 Bootstrap
AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架. 查看 Bootstra ...
随机推荐
- PrintDocument 实践
简单使用,直接上代码 1.设置打印页大小 和页边距 this.printDocument1.DefaultPageSettings = new System.Drawing.Printing.Page ...
- bzoj1021 [SHOI2008]Debt 循环的债务
前天打了一场比赛,让我知道自己Dp有多弱了,伤心了一天,没刷bzoj. 昨天想了一天,虽然知道几何怎么搞,但我还是不敢写,让我知道自己几何有多弱了,伤心了一天,没刷bzoj 1021: [SHOI20 ...
- jQuery Event.delegateTarget 属性详解
// 为id为element的元素中的所有span元素绑定click事件 $("#element").on( "click", "span" ...
- Android MVVM框架RoboBinding初探
RoboBinding是一个实现了数据绑定 Presentation Model(MVVM) 模式的Android开源框架.MVVM模式是MVC模式的重要更新,使得项目结构更加的优美,易于维护以及方便 ...
- 【BZOJ】1054: [HAOI2008]移动玩具（bfs+hash）
http://www.lydsy.com/JudgeOnline/problem.php?id=1054 一开始我还以为要双向广搜....但是很水的数据,不需要了. 直接bfs+hash判重即可. # ...
- HDU 4649 Professor Tian(DP)
题目链接 暴力水过的,比赛的时候T了两次,优化一下初始化,终于水过了. #include <cstdio> #include <cstring> #include <st ...
- CentOS下搭建使用gitlab 和tortoiseGit使用
gitlab和github 一样很爽的一个东西 关于gitlab在CentOS下的安装方法地址参考: https://github.com/gitlabhq/gitlab-recipes/tree/m ...
- 解决javax.imageio.IIOException: Can't create output stream!
解决javax.imageio.IIOException: Can't create output stream! javax.imageio.ImageIO.write(image, "J ...
- CUDA/OpenCL 学习资料
VS2010 NVIDIA OpenCL 开发环境配置 CUDA 在线课程 [经典培训] 全球首套中文CUDA 教程-胡文美教授主讲
- ArcEngine开发：IElement.Geometry 值不在预期范围内 + 元素绘制代码
IElement pEle = pLineEle as IElement; pEle.Geometry = pLn; pLn为一个ILine对象,想当然的以为它是IGeometry对象,可以赋值,结果 ...