Accordion手风琴控件使用uib-accordion和uib-accordion-group指令。

<script>

        angular.module('myApp', ['ui.bootstrap']).controller('AccordionDemoCtrl', function ($scope) {

            $scope.oneAtATime = true;

            $scope.status = {

                isFirstOpen: true,

                isFirstDisabled: false

            };

        });

</script>
<uib-accordion close-others="oneAtATime">

            <uib-accordion-group heading="标题" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">

                内容...

            </uib-accordion-group>

</uib-accordion>

效果为：

uib-accordion的属性:

属性名称

默认值

说明

close-others

true

展开一个面板时是否关闭其他面板

template-url

template/accordion/accordion.html

在ui-bootstrap-tpls-1.3.2.js文件中使用的模板名称

uib-accordion-group的属性:

属性名称

默认值

说明

heading

none

面板头部的标题

is-disabled

false

面板是否禁用

is-open

false

面板是否展开

panel-class

panel-default

可以使用Bootstrap的样式,如panel-primary, panel-success, panel-info,panel-warning,panel-danger等。必须为字符串。

template-url

uib/template/accordion/accordion-group.html

在ui-bootstrap-tpls-1.3.2.js文件中使用的模板名称

上例中的uib-accordion-group标题和内容都是直接写在视图中的，除此之外，uib-accordion-group还有其他几种使用方式：

1. 配合ng-repeat生成面板

$scope.groups = [

              {

                  title: '第一个面板',

                  content: '第一个面板的内容'

              },

              {

                  title: '第二个面板',

                  content: '第二个面板的内容'

              }

            ];
<uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">

                {{group.content}}

</uib-accordion-group>

效果为：

2. 面板中可以包含动态生成的内容

$scope.items = ['Item 1', 'Item 2', 'Item 3'];

$scope.addItem = function () {

      var newItemNo = $scope.items.length + 1;

      $scope.items.push('Item ' + newItemNo);

 };
<uib-accordion-group heading="动态内容">

                <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>

                <div ng-repeat="item in items">{{item}}</div>

</uib-accordion-group>

效果为：

点击Add Item按钮后，面板的内容增加了，面板的大小也会变化，适应新的内容。

3. 使用自定义模板

uib-accordion-group默认的模板是uib/template/accordion/accordion-group.html，模板内容包含在ui-bootstrap-tpls-1.3.2.js文件中，可以参考原生的模板内容写一个自定义模板，然后用template-url来引用。

例：

 <script type="text/ng-template" id="group-template.html">

             <div class="panel {{panelClass || 'panel-default'}}">

                 <div class="panel-heading">

                     <h4 class="panel-title" style="color:#fa39c3">

                         <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">

                             <span ng-class="{'text-muted': isDisabled}">{{heading}}</span>

                         </a>

                     </h4>

                 </div>

                 <div class="panel-collapse collapse" uib-collapse="!isOpen">

                     <div class="panel-body" style="text-align: right" ng-transclude></div>

                 </div>

             </div>

 </script>
 <uib-accordion-group heading="Custom template" template-url="group-template.html">

 Hello

 </uib-accordion-group>

4. 使用自定义的面板标题

如果面板的标题是简单的文本，使用heading属性就足够了。如果是复杂的内容，比如有图标，那么可以使用uib-accordion-heading

<uib-accordion-group is-open="status.open">

     <uib-accordion-heading>

         自定义的面板标题 <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>

     </uib-accordion-heading>

     内容...

</uib-accordion-group>

效果为：

在实际使用中，如果想在点击每个面板标题时就展开控件，而不是点击文字才展开，那么加入这个样式：

.accordion-toggle { display: block; }

如果想在面板标题中加入可点击的元素（按钮，复选框等），并且点击这些元素时不展开控件，那么要在这些元素上阻止事件冒泡：

ng-click="$event.stopPropagation()"

最后，贴上完整的代码：

 <!DOCTYPE html>

 <html ng-app="myApp" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link href="/Content/bootstrap.css" rel="stylesheet" />

     <title></title>

     <script src="/Scripts/angular.js"></script>

     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>

     <script>

         angular.module('myApp', ['ui.bootstrap']).controller('AccordionDemoCtrl', function ($scope) {

             $scope.oneAtATime = true;

             $scope.groups = [

               {

                   title: '第一个面板',

                   content: '第一个面板的内容'

               },

               {

                   title: '第二个面板',

                   content: '第二个面板的内容'

               }

             ];

             $scope.items = ['Item 1', 'Item 2', 'Item 3'];

             $scope.addItem = function () {

                 var newItemNo = $scope.items.length + 1;

                 $scope.items.push('Item ' + newItemNo);

             };

             $scope.status = {

                 isFirstOpen: true,

                 isFirstDisabled: false

             };

         });

     </script>

 </head>

 <body style="padding:10px;">

     <div ng-controller="AccordionDemoCtrl">

         <script type="text/ng-template" id="group-template.html">

             <div class="panel {{panelClass || 'panel-default'}}">

                 <div class="panel-heading">

                     <h4 class="panel-title" style="color:#fa39c3">

                         <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">

                             <span ng-class="{'text-muted': isDisabled}">{{heading}}</span>

                         </a>

                     </h4>

                 </div>

                 <div class="panel-collapse collapse" uib-collapse="!isOpen">

                     <div class="panel-body" style="text-align: right" ng-transclude></div>

                 </div>

             </div>

         </script>

         <div class="checkbox">

             <label>

                 <input type="checkbox" ng-model="oneAtATime">

                 同一时间只展开一个面板

             </label>

         </div>

         <uib-accordion close-others="oneAtATime">

             <uib-accordion-group  heading="标题" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">

                 内容...

             </uib-accordion-group>

             <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">

                 {{group.content}}

             </uib-accordion-group>

             <uib-accordion-group heading="动态内容">

                 <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>

                 <div ng-repeat="item in items">{{item}}</div>

             </uib-accordion-group>

             <uib-accordion-group heading="Custom template" template-url="group-template.html">

                 Hello

             </uib-accordion-group>

             <uib-accordion-group heading="提示面板" panel-class="panel-info">

                 注意面板的颜色

             </uib-accordion-group>

             <uib-accordion-group is-open="status.open">

                 <uib-accordion-heading>

                     自定义的面板标题 <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>

                 </uib-accordion-heading>

                 内容...

             </uib-accordion-group>

         </uib-accordion>

     </div>

 </body>

 </html>

目录：

AngularJs的UI组件ui-Bootstrap分享（一）

AngularJs的UI组件ui-Bootstrap分享（二）——Collapse

AngularJs的UI组件ui-Bootstrap分享（三）——Accordion

AngularJs的UI组件ui-Bootstrap分享（四）——Datepicker Popup

AngularJs的UI组件ui-Bootstrap分享（五）——Pager和Pagination

AngularJs的UI组件ui-Bootstrap分享（六）——Tabs

AngularJs的UI组件ui-Bootstrap分享（七）——Buttons和Dropdown

AngularJs的UI组件ui-Bootstrap分享（八）——Tooltip和Popover

AngularJs的UI组件ui-Bootstrap分享（九）——Alert

AngularJs的UI组件ui-Bootstrap分享（十）——Model

AngularJs的UI组件ui-Bootstrap分享（十一）——Typeahead

AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar

AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

AngularJs的UI组件ui-Bootstrap分享（三）——Accordion的更多相关文章

  1. Android用户界面 UI组件--TextView及其子类(三) EditView以及各种Span文字样式讲解

    EditView和TextView的用法差不多,只是文字可编辑 小技巧: 设置EditText隐藏键盘  setInputType(0); 设置EditText不被输入法遮盖  getWindow() ...

  2. Android用户界面UI组件--AdapterView及其子类(三) ExpandableListView

    ExpandableListView: List中的每一项可以展开收缩. 一种伸缩式的ListView. android:cacheColorHint="#00000000" 这个 ...

  3. Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu

    1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...

  4. Ionic4.x 中的 UI 组件(UI Components) 日期组件

    1.日期组件的基本使用 官方文档:https://ionicframework.com/docs/api/datetime 模板中: <ion-datetime display-format=& ...

  5. Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件

    Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...

  6. Ionic4.x 中的 UI 组件(UI Components)表单相关组件

    1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...

  7. 挂号平台首页开发（UI组件部分）

    JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log(&q ...

  8. AngularJs的UI组件ui-Bootstrap分享（一）

    最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...

  9. AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

    Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...

随机推荐

  1. 一步一步实现MVC5+EF6+Bootstarp+Autofac+NoSql实现OADemo 之登陆（一） 验证码 Captcha 之大插件小用

    不知何年何月才能完成OADemo啊,总之还是一步一步来吧,这段时间开始着手了,先做登陆.  前段时间研究了一下在CentOS7下安装Mysql和Memcached服务,并测试了用C#操作,结果还行. ...

  2. css3属性之 box-sizing

    w3c plus上有详细介绍及原理http://www.w3cplus.com/content/css3-box-sizing,这里摘录其中重要知识点部分. 本文重点考虑移动开发,所以默认移动端的浏览 ...

  3. 安装appcan后打开eclipse出错

    原有eclipse,后安装appcan后打开eclipse出错,因为appcan是自带的编译器也是eclipse所以会产生冲突,只需要在环境变量path里面把java_home参数移到appcan参数 ...

  4. MySQL functions, IF, CASE

    MySQLTutorial官网 IF function syntax: IF(expr,if_true_expr,if_false_expr) CASE expression syntax: CASE ...

  5. python入门练习题1

    常见python入门练习题 1.执行python脚本的两种方法 第一种:给python脚本一个可执行的权限,进入到当前存放python程序的目录,给一个x可执行权限,如:有一个homework.py文 ...

  6. AC自动机——Uva 11468 子串

    题目链接:http://vjudge.net/contest/142513#problem/A 题意:给出一些字符和各自对应的选择概率,随机选择L次后将得到一个长度为L的随机字符串S.给出K个模版串, ...

  7. 如何阅读《ECMAScript 2015 Language Specification》

    你不需要把<ECMAScript 2015 Language Specification>通读一遍,因为没那个必要.   阮一峰建议: 对于一般用户来说,除了第4章,其他章节都涉及某一方面 ...

  8. JAVA线程锁-读写锁应用，简单的缓存系统

    在JAVA1.5版本以后,JAVA API中提供了ReadWriteLock,此类是一个接口,在它的实现类中ReentrantReadWriteLock中有这样一段代码 class CachedDat ...

  9. 【C++/Qt】Qt中的parent形参

    在 派生类的构造函数初始化列表中 调用 父类的带有参数的构造函数,是为了初始化从父类继承来的成员变量.因为这些变量无法直接初始化,只能采用这种方式初始化. 而在qt中,MainWindow中的某成员变 ...

  10. Double Buffering Windows Forms

    Double Buffering Windows Forms As much as we would like it not to be the case, graphics can be slow ...