主页面代码（发现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. WCF 采用net.tcp协议实践

    概述 与Socket相比,WCF真是爽得不得了,其基本指导思想为SOA——面向服务. 其基本配置在于ABC(Address,Binding,Contract),通常,只要这三个因素配置对了,那么,基本 ...

  2. Partran,Nastran和ANSYS的区别

    Partran .Nastran是MSC公司的产品.Patran是前处理器,用于建模.划分网格.设定载荷和边界条件等等:Nastran只是MSC公司提供的求解器之一,主要用于结构分析和热分析,应用的是 ...

  3. No FileSystem for scheme: 远程访问HDFS找不到shceme

    问题描述: hadoop版本:hadoop-2.0.0-cdh4.3.0 在本地环境下能够找到scheme,但是通过maven打包fatjar 后放到其他机器上就出现找不到scheme. 看了代码,发 ...

  4. CentOS6.4 配置mysql服务器启动多个端口，同步单表数据

    ============================================================ ====多端口启动==== ========================= ...

  5. Google Code Jam 2010 Round 1C Problem B. Load Testing

    https://code.google.com/codejam/contest/619102/dashboard#s=p1&a=1 Problem Now that you have won ...

  6. 利用Oracle的row_number() over函数消除重复的记录

    .select d.id,d.outer_code from dict_depts_source d order by outer_code(查看重复数据) .select d.id,d.outer_ ...

  7. iOS移动开发周报-第22期

    iOS移动开发周报-第22期 [摘要]:本期iOS移动开发周报带来如下内容:苹果股价创新高,iOS8自动调整UITableView布局,Swift学习心得等. 新闻 <苹果股价创新高 市值全球第 ...

  8. 转载--thinkphp框架的路径问题 - 总结

    转自:http://blog.sina.com.cn/s/blog_827ddd950100ulyv.html TP中有不少路径的便捷使用方法,比如模板中使用的__URL__,__ACTION__等, ...

  9. POJ 3468 A Simple Problem with Integers（线段树区间更新区间查询）

    A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 92632   ...

  10. Apache Spark技术实战之2 -- PackratParsers实例

    欢迎转载,转载请注明出处,徽沪一郎 概要 通过一个简明的Demo程序来说明如何使用scala中的PackratParsers DemoApp import scala.util.parsing.com ...