主页面代码（发现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. MathType 插入定义的chapter and section break后无法隐藏

    每一章标题后面插入一个“Next Section Break”,这样定稿后各章文件组合为总文件后,方程编号会自动递增,如果已经插入了默认的“Equation Chapter 1 Section 1”, ...

  2. 《菊与刀》--[美]鲁思·本尼迪克特（Ruth Benedict）

    <菊与刀>这本书实在是好看. 下面是一些书摘: * 由在美国曾经全力以赴与之战斗的敌人中,日本人的脾气是最琢磨不透的. * “菊”本是日本皇家家微,“刀”是武家文化的象征. * 日本人的格 ...

  3. 什么是SQL注入式攻击

    什么是SQL注入式攻击? 所谓SQL注入式攻击,就是攻击者把SQL命令插入到Web表单的输入域或页面请求的查询字符串,欺骗服务器执行恶意的SQL命令.在某些表单中,用户输入的内容直接用来构造(或者影响 ...

  4. iOS开发之正则表达式

    正则表达式用于字符串处理.表单验证等场合,实用高效.现将一些常用的表达式收集于此,以备不时之需. 匹配中文字符的正则表达式: [\u4e00-\u9fa5]评注:匹配中文还真是个头疼的事,有了这个表达 ...

  5. QRadioButton 使用方法

    QRadioButton 控件是Qt中实现多选一功能的控件,它的使用方法如下: 声明控件: QRadioButton *rbutton; 然后实现它的响应函数: void YourClass::on_ ...

  6. 两个List,第二个List根据第一个List排序

    /// <summary> /// 协同排序 /// </summary> /// <param name="sod"></param&g ...

  7. eval(gzinflate(base64_decode N层，自动解密

    <?php header("Content-type: text/html; charset=utf-8"); $decode = 'DZdFEsRWEkT3vojt0EJM ...

  8. android之TabHost(下)

    首先建立res/layout/tab.xml文件 编写代码如下: <?xml version="1.0" encoding="utf-8"?> &l ...

  9. 让VIEWSTATE从页面中完全消失(小技巧)

      VIEWSTATE是个好东西,是asp.net的一大创举,给web开发带来了极大的便利,然后这种便利是一种双刃剑,尤其是在前台页面,大多数前台页面都是用来展示列表数据,和用户交互的地方现在大都采用 ...

  10. svchost.exe是什么？为什么一直在运行

    原文:http://www.howtogeek.com/howto/windows-vista/what-is-svchostexe-and-why-is-it-running/ 自己简单翻译了下,图 ...