主页面代码（发现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的“手风琴”的更多相关文章

  1. Angular.js+Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

  2. Angularjs与bootstrap.datetimepicker结合实现日期选择器

    http://www.lovelucy.info/angularjs-best-practices.html http://damoqiongqiu.iteye.com/blog/1917971 ht ...

  3. AngularJs + angular-ui-router + bootstrap 实现blog基础导航功能

    AngularJs + angular-ui-router + bootstrap 实现blog基础导航功能 核心代码如下 1.index.html <!DOCTYPE html> < ...

  4. AngularJS中bootstrap启动

    对于一般的使用者来说,AngularJS的ng-app都是手动绑定到某个dom元素.但是在一些应用中,这样就显得很不方便了 绑定初始化 通过绑定来进行angular的初始化,会把js代码侵入到html ...

  5. 新建一个angularjs+requirejs+bootstrap+typescript+gulp+vscode+git的项目

    环境 windows 10 准备工具 Visual Studio Code Node.js Git 需求 必须支持IE8 步骤开始: 执行命令行工具 mkdir Demo && cd ...

  6. angularjs封装bootstrap官网的时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...

  7. AngularJS(12)-BootStrap集成

    AngularJS 的首选样式表是 Bootstrap, Bootstrap 是目前最受欢迎的前端框架. <!DOCTYPE html> <html lang="en&qu ...

  8. bootstrap实现手风琴功能(树形列表)

    首先把架包拷进项目,然后在页面中引进css,js <script src="js/jquery/jquery-2.1.1.min.js"></script> ...

  9. AngularJS 和 Bootstrap

    AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架. 查看 Bootstra ...

随机推荐

  1. jws操作

    SQLite 并发写入的问题有人解决了吗? 我记得servicestack4的ormlite挺快的 但不开源了 那时候写10w条,200多m数据一下子就写完了,3的话就慢得不行 大家好,关于jws操作 ...

  2. ios 开发中出现的 pointer being freed was not allocated *** set a breakpoint in malloc_error_break to debug

    主要原因是某部分内存释放的太频繁,解决方法是检查函数的中[xxx release]; 将其注释掉 就行了

  3. C# DateTime 日期加1天 减一天 加一月 减一月 等方法（转）

    //今天 DateTime.Now.Date.ToShortDateString(); //昨天,就是今天的日期减一 DateTime.Now.AddDays(-1).ToShortDateStrin ...

  4. oracle函数listagg的使用说明(分组后连接字段)

    关于oracle函数listagg的使用说明 工作中经常遇到客户提出这样的需求,希望在汇总合并中,能够把日期逐个枚举出来. 如图,原始数据是这样的: 客户希望能够实现这样的汇总合并: 那么通常我会使用 ...

  5. UIWebView弹出键盘按钮显示中文

    UIWebView是一个很常用的视图,一般用来加载网页,比如百度: 点击文本框输入框后,会弹出一个带有toolbar的键盘,toolbar中有3个辅助按钮 有了这3个按钮,是方便很多,但默认是英文的, ...

  6. tableviewcell的这贴状态和传值总结

    01  控制器 1.1 定义一个可变数组存放数据,再定义一个可变数组来记录分组的折叠状态 @property(nonatomic)NSMutableArray *dataArr; //记录所有分组的折 ...

  7. Matlab Delete Row or Col 删除矩阵的行或列

    Matlab中,我们有时候要删除矩阵中的某行某列,可以采用下列方法进行删除: a = [ ]; a(,:) = []; % Delete row a(:,) = []; % Delete col

  8. [转载]git 忽略某些文件

    项目中经常会生成一些Git系统不需要追踪(track)的文件.典型的是在编译生成过程中 产生的文件或是编程器生成的临时备份文件.当然,你不追踪(track)这些文件,可以 平时不用"git ...

  9. LeetCode | Regular Expression Matching

    Regular Expression Matching Implement regular expression matching with support for '.' and '*'. '.' ...

  10. java类的继承

    继承就是在一个现有类型的基础上,通过增加新的方法或者重定义已有方法(重写)的方式,产生一个新的类型.继承是面向对 象的三个基本特征--封装.继承.多态的其中之一,我们在使用java时编写的每一个类都是 ...