主页面代码（发现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. Codeforces 161D Distance in Tree（树的点分治）

    题目大概是,给一棵树,统计距离为k的点对数. 不会DP啊..点分治的思路比较直观,啪啪啪敲完然后AC了.具体来说是这样的: 树上任何两点的路径都可以看成是一条过某棵子树根的路径,即任何一条路径都可以由 ...

  2. java.lang.RuntimeException: Invalid action class configuration that references an unknown class named [xxxAction]。

    java.lang.RuntimeException: Invalid action class configuration that references an unknown class name ...

  3. BZOJ3834 : [Poi2014]Solar Panels

    问题相当于找到一个最大的k满足在$[x_1,x_2]$,$[y_1,y_2]$中都有k的倍数 等价于$\frac{x_2}{k}>\frac{x_1-1}{k}$且$\frac{y_2}{k}& ...

  4. c++ auto_ptr 智能指针

    c++使用智能指针应该保证无论在何种情况下,只要自己被摧毁,就一定连带释放其所有资源,而由于智能型指针本身就是区域变量, 所以无论是正常退出,还是异常退出,只要函数退出,它就一定销毁 常数型auto_ ...

  5. TYVJ P1034 尼克的任务 Label:倒推dp

    背景 题库靠大家,人人都爱它. 描述 尼克每天上班之前都连接上英特网,接收他的上司发来的邮件,这些邮件包含了尼克主管的部门当天要完成的全部任务,每个任务由一个开始时刻与一个持续时间构成.尼克的一个工作 ...

  6. POJ 3034 Whac-a-Mole(DP)

    题目链接 理解了题意之后,这个题感觉状态转移还是挺好想的,实现起来确实有点繁琐,代码能力还有待加强,经过很长时间才发现bug.注意坐标可能是负的. #include <cstdio> #i ...

  7. sql中的视图

    视图可分为:普通视图和索引视图视图的作用: 1.提高数据库的安全性,降低数据库被攻击的风险,使外界无法得知数据库的数据结构 2.使查询更方便,简化程序员的操作非只读视图可以增删改,但不建议.视图的试用 ...

  8. css margin居中的问题

    1.要在外壳套上一个父div加上100%宽度,在子div加上宽度和margin:auto; 2.子div的宽度通常是子div中元素的宽度,比如子div中一个宽度为169px的input.想居中的话,就 ...

  9. php构造函数,引入数据库操作类函数

    <?php /**     * 基于左右值排序的无限分类算法     * 数据库结果为 CREATE TABLE om_catagory (      CatagoryID int(10) un ...

  10. MySQL数据库管理常用命令

    参考: http://blog.linuxeye.com/419.html 安装 利用RPM包安装MySQL   设置TCP 3306端口的iptables     root密码管理 设置root用户 ...