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. 递归函数 Python

    函数: def fact(n): if n==1: return 1 return n * fact(n-1) 递归过程: print(fact(5)) >>fact(5) >> ...

  2. Your pain

    Your pain is the breaking of the shell that encloses your understanding. 你的痛苦是你那包裹知识的皮壳的破裂.

  3. 重置样式 - Eric Meyer的原版

    重置样式就是一组CSS声明,用来覆盖不同浏览器渲染HTML元素时的各种默认样式.重置样式一般会被加入到主样式文件的开头,用来将各个浏览器的自有默认样式重置成统一表现,确保样式表中后续追加的样式在不同浏 ...

  4. 【转】Struts1.x系列教程（7）：Logic标签库

    转载地址:http://www.blogjava.net/nokiaguy/archive/2009/01/archive/2009/01/archive/2009/01/archive/2009/0 ...

  5. python协程与异步I/O

    协程 首先要明确,线程和进程都是系统帮咱们开辟的,不管是thread还是process他内部都是调用的系统的API,而对于协程来说它和系统毫无关系; 协程不同于线程的是,线程是抢占式的调度,而协程是协 ...

  6. Testng使用方法示例

    TestNG TestNG是一个测试框架,灵感来自JUnit和NUnit.但引入了下面这些新的功能,使它更强大和更容易使用. 注解: 可在任意大的线程池运行您的测试(所有方法在它们自己的线程内,一个线 ...

  7. [问题2014A10] 复旦高等代数 I（14级）每周一题（第十二教学周）

    [问题2014A10]  设 \(A\) 为 \(n\) 阶实方阵满足 \(AA'=I_n\) (即 \(A\) 为 \(n\) 阶正交阵), 证明: \[\mathrm{rank}(I_n-A)=\ ...

  8. EXCEL计算数字、汉字、英文单元格的计数

    1.数字COUNT(A1:A100)2.汉字{=SUMPRODUCT(IF(LEN(A1:A100)LENB(A1:A100),1,0)*1)}3.英文{=SUMPRODUCT(IF(ISTEXT(A ...

  9. HTML布局与框架

    HTML块 HTML块元素 块元素在显示时,通常会以新行开始 如:<h1>.<p>.<ul> <!DOCTYPE html> <html> ...

  10. SecureCRT配色

    SecureCRT是一款支持SSH(SSH1和SSH2)的终端仿真程序,简单的说是Windows下登录UNIX或Linux服务器主机的软件.SecureCRT支持SSH,同时支持Telnet和rlog ...