用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 ...
随机推荐
- [Cocos2d-x For WP8]Transition 场景切换
在游戏中通常会打完了一关之后就会从当前的场景转换到另外一关的场景了,在Cocos2d-x中是由CCScene类表示一个场景.那么场景(CCScene)是为游戏中的精灵(CCSprite)提供了舞台,场 ...
- UiAutomator 测试工程开发小结
一. 关于bundle无法导入中文参数 答: 将文件改为UTF-8格式 二. 关于对无法抓取的控件进行快速输入问题 答: 主要通过pressKeyCode方法,首先将光标锁定在 ...
- JAVA NIO异步通信框架MINA选型和使用的几个细节(概述入门，UDP, 心跳)
Apache MINA 2 是一个开发高性能和高可伸缩性网络应用程序的网络应用框架.它提供了一个抽象的事件驱动的异步 API,可以使用 TCP/IP.UDP/IP.串口和虚拟机内部的管道等传输方式.A ...
- sql server导出insert语句
在所需要导出数据库上右键 选择[任务] 然后选择[生成脚本] 选择数据库,点击下一步到[数据脚本选项] 编写数据的脚本 选择为true 这一步很重要 下一步选择要导出的对象 下一步选择表 点击完成 ...
- C++ Generate Rand Number Array by "srand()" 生成随机数
在C++中,我们有时想生成一个由随机数组成的数组,而且随机数的范围也可由我们来设定.那么我们就要用到srand()函数配合rand()来使用,参见如下代码: #include <vector&g ...
- Grunt - grunt-contrib-connect
快速搭建本地化服务 推荐加强版 : http://www.cnblogs.com/CyLee/p/5331055.html 首先要安装全局的grunt-cli sudo npm install gru ...
- 关于纯css布局的概况
用一些常用的手法来表现感情或者论证问题,这在XHTML中就是用特定的元素来完成一些常见的信息组织.下面就是信息组织形式与元素的对应列表. img 作为内容的图片是一定要放到img里面的,这没有更好的选 ...
- GC、LOH和Performance相关
Performance Now that we have a basic model for how things are working, let's consider some things th ...
- HDU 1069 Monkey and Banana（二维偏序LIS的应用）
---恢复内容开始--- Monkey and Banana Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ...
- CSS权威指南 - 基础视觉格式化 2
行内元素 em a 非替换元素 img 替换元素 两者在内联内容处理方式不一样. inline有时候被翻译成内联,比如inline content,有时候被翻译成行内 inline box. 行布局 ...