用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 ...
随机推荐
- html整理（2）
使用mailto在网页中链接Email地址 <a>标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件.我们还可以利用mailto做许多其它事情 ...
- AngularJS 表单提交后显示验证信息与失焦后显示验证信息
虽然说AngularJS的实时表单验证非常有用,非常高效方便,但是当用户还没有完成输入时便弹出一个错误提示,这种体验是非常糟糕的. 正常的表单验证逻辑应该是在用户提交表单后或完成当前字段中的输入后,再 ...
- 如何在 .Net Framework 4.0 项目上使用 OData？
最新的 Microsoft ASP.NET Web API 2.1 OData 5.1.0 已只能在 .Net Framework 4.5 的安装了,如果要在 VS2010的 .Net Framewo ...
- C#线程间同步无法关闭
用C#做了个线程间同步的小程序,但每次关闭窗口后进程仍然在,是什么原因? 解决方法: 要加一句 线程.IsBackground = true; 否则退出的只是窗体 上面的方法没看懂... MSDN上说 ...
- POJ 1523 (割点+连通分量)
题目链接:http://poj.org/problem?id=1523 题目大意:连通图,找图中割点,并计算切除该割点后,图中的连通分量个数. 解题思路: POJ的数据很弱. Tarjan法求割点. ...
- A Complete Guide to the <Picture> Element
If you’ve ever struggled building responsive websites, this post is for you. It’s part of a series o ...
- [Unity2D]脚本的使用规则
Unity2D的游戏脚本可以使用3中开发语言来编写:C#,JavaScript和BOO.你可以选择你熟悉的编程语言来编写,通常C#语言的编程功能会更加强大一些,成为首选的语言.在Unity2D中使用C ...
- telerik 某些ajax拿数据方式下 load on demand 不起作用
方法一:加入以下代码 <%= Html.Telerik().ScriptRegistrar().DefaultGroup(group => { group.Add("teleri ...
- Idea_Maven配置
操作方式:在install上右键——>Run***install 出现Run Configurations ——>右键——>Edit Run Configuration 1.Inst ...
- Struts2 中result type属性说明
Struts2 中result type属性说明 首先看一下在struts-default.xml中对于result-type的定义: <result-types><result-t ...