主页面代码（发现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. 递推DP 赛码 1005 Game

    题目传送门 /* 递推DP:官方题解 令Fi,j代表剩下i个人时,若BrotherK的位置是1,那么位置为j的人是否可能获胜 转移的时候可以枚举当前轮指定的数是什么,那么就可以计算出当前位置j的人在剩 ...

  2. 最短路(Floyd_Warshall) POJ 2253 Frogger

    题目传送门 /* 最短路:Floyd算法模板题 */ #include <cstdio> #include <iostream> #include <algorithm& ...

  3. ural 1242. Werewolf

    1242. Werewolf Time limit: 1.0 secondMemory limit: 64 MB   Knife. Moonlit night. Rotten stump with a ...

  4. 获取当前的时间，转化为char[]格式unix时间戳

    /* 在这个程序当中实现获取当前的unix时间戳 转化为char[] */ #include<stdio.h> #include<stdlib.h> #include<t ...

  5. BZOJ3488 : [ONTAK2010]Highways

    对于询问(x,y),恰经过一条非树边且不经过树上两点间路径的路径数为: ·若x与y成祖先-孩子关系,假设y是x的祖先,z是y到x方向的第一个节点,则 ans=起点在x的子树里,且终点不在z的子树里的非 ...

  6. Insert Function before and after main function

    Source code: 1: #include<stdio.h> 2: void myStartupFun (void) __attribute__ ((constructor)); 3 ...

  7. Android之adb异常

    Android使用adb模拟器时出现"unable to establish connection to adb"."ADB server didn't ACK" ...

  8. SQLServer触发器创建、删除、修改、查看示例代码

    一: 触发器是一种特殊的存储过程﹐它不能被显式地调用﹐而是在往表中插入记录﹑更新记录或者删除记录时被自动地激活.所以触发器可以用来实现对表实施复杂的完整性约束.  二: SQL Server为每个触发 ...

  9. sizeToFit()使用心得

    sizeToFit()使用心得: 很多的初学者,包括我在内,当初在学习的时候,特别纠结什么时候用这个sizeToFit(). 下面我就来分享一下我的一些使用心得. 一.我们先来看看官方文档对sizeT ...

  10. android之Chronometer

    首先定义activity_main.xml文件 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/re ...