用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 ...
随机推荐
- SignalR —— Asp.net RealTime的春天
一般的例子:http://www.asp.net/signalr/overview/signalr-20/getting-started-with-signalr-20/tutorial-gettin ...
- css构造块级元素
css 1. 宽高width:数值;height:数值;也可用百分比!长高的设置不会被后代继承2. 背景(1)背景颜色background-color:颜色值;元素的背景颜色默认为transparen ...
- HDU1561 The more, The Better（树形DP）
题目是有n个存有宝藏的城堡,攻克任何一个城堡都需要先攻克0个或其他1个城堡,问攻克m个城堡最多能得到多少宝藏. 题目给的城堡形成一个森林,添加一个超级根把森林连在一起就是树了,那么就考虑用树型DP: ...
- Converting Stream to String and back…what are we missing?
string test = "Testing 1-2-3"; // convert string to stream byte[] byteArray = Encoding.ASC ...
- 今年暑假不AC[HDU2037]
今年暑假不AC Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- Big Event in HDU[HDU1171]
Big Event in HDU Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- BZOJ3757 : 苹果树
树上莫队,有几个坑: a可能等于b 数据范围是100000 #include<cstdio> #include<algorithm> #include<cmath> ...
- 【POJ】1113 Wall（凸包）
http://poj.org/problem?id=1113 答案是凸包周长+半径为l的圆的周长... 证明?这是个坑.. #include <cstdio> #include <c ...
- 【BZOJ】2049: [Sdoi2008]Cave 洞穴勘测（lct/并查集）
http://www.lydsy.com/JudgeOnline/problem.php?id=2049 bzoj挂了..在wikioi提交,,1A-写lct的速度越来越快了-都不用debug-- 新 ...
- HDNOIP201404最短路径
HDNOIP201404最短路径 难度级别: A: 编程语言:不限:运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 a.b.c是3个互不相等的1 ...