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. SQL2005中的事务与锁定（八）- 转载

    ------------------------------------------------------------------------ -- Author : happyflystone - ...

  2. PHPCMS V9 框架代码分析（入口程序）

    PHPCMS是采用MVC设计模式开发,基于模块和操作的方式进行访问,采用单一入口模式进行项目部署和访问,无论访问任何一个模块或者功能,只有一个统一的入口. 入口程序是在前期处理用户请求的引导程序.它是 ...

  3. "未能找到类型或命名空间名称",引用dll的时候出错

    当前项目是.net2.0框架,引用的dll是 .net 4.5框架,引用后编译时报错“未能找到类型或命名空间名称”. 当前项目 右键-->应用程序-->目标框架 改为 .net frame ...

  4. spring环境搭建需要的插件-------Spring Tool Suite™ Downloads

    下载地址http://spring.io/tools/sts/all 上面的是集成了eclipse的,所以文件比较大,下面的是单独的插件,下载之后打开eclipse,help->installN ...

  5. RAM与ROM

    随着对计算机行业的深入了解,很多人开始听到一些RAM和ROM的讨论话题,之前我也不是很清楚,也不知道他和电脑的内存有什么联系.下面就让我们一起来学习一下这个吧. 首先RAM和ROM是什么 RAM和RO ...

  6. python学习之字符串变量

    1.字符串引用变量 name="Jasper" age=23 msg="my name is %s,my age is %s"%(name,age) print ...

  7. JAVA生成图片缩略图、JAVA截取图片局部内容

    package com.ares.image.test; import java.awt.Color; import java.awt.Graphics; import java.awt.Image; ...

  8. 什么是 Help Desk？

    科技如何帮助公司发展,关键就在于保证IT系统的安全稳定运行.我们都知道要保证系统100%可用非常难实现,那么如何在系统故障时减少处置时间?一个有效的办法就是帮助台(Help Desk).那么什么是帮助 ...

  9. 设置core环境

    void dummy_function (void){ unsigned char *ptr = 0x00; *ptr = 0x00;} int main (void){ dummy_function ...

  10. 凯撒密码加密C语言简单实现

    凯撒加密(Julius Caesar)该方法把一条消息中的每个字母用字母表中固定距离之后的那个字母代替.(如果超越了字母Z,会绕道字母表的起始位置.例如,如果每个字母都用字母表中两个位置之后的字母代替 ...