angularUI之accordion的用法

最新推荐文章于 2022-06-26 18:25:14 发布

原创最新推荐文章于 2022-06-26 18:25:14 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#accordion #angularUI

本文介绍了一个使用Angular和UI-Bootstrap实现的折叠面板组件。该组件包括ui-accordion和ui-accordion-group两个指令，用于创建可折叠的内容区块。通过设置属性如close-others和template-url，可以定制面板的行为和外观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是官网上的一段代码：

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>accordion_demo</title>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-animate.min.js"></script>
    <script type="text/javascript" src="js/ui-bootstrap-tpls-2.1.4.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript">
        var app = angular.module('app',['ui.bootstrap']);
        app.controller('MyCtrl', function($scope){
            $scope.oneAtTime = true;
            $scope.groups = [
                {
                    title: 'Dynamic Group Header -1',
                    content: 'Dynamic Group body -1'
                },
                {
                    title: 'Dynamic Group Header -2',
                    content: 'Dynamic Group Body -2'
                }
            ];
            $scope.items = ['Item 1', 'Item2', 'Item3'];
            $scope.addItem = function(){
                var newItemNo = $scope.items.length + 1;
                $scope.items.push('Item '+ newItemNo);
            }
            $scope.status = {
                isCustomHeaderOpen: false,
                isFirstOpen: true,
                isFirstDisabled: false
            }
        })
    </script>
</head>
<body ng-controller="MyCtrl">
    <p>
        <button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
        <button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = !status.isFirstDisabled">Enable/Disable first panel</button>
    </p>
    <div uib-accordion close-others="oneAtTime">
        <div uib-accordion-group class="" heading="Static Header, initially expanded"
             is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
            This content is straight in the template.
        </div>
        <div uib-accordion-group class="panel-default" heading="{{group.title}}" ng-repeat="group in groups">
            {{group.content}}
        </div>
        <div uib-accordion-group class="panel-default" heading="Dynamic Body Content">
            <p>The body of the uib-accordion group grows to fit the contents</p>
            <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
            <div ng-repeat="item in items">{{item}}</div>
        </div>
        <div uib-accordion-group class="panel-default" heading="Custom template" template-url="group-template.html">
            Hello
        </div>
        <div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
            <uib-accordion-heading>
                Custom template with custom header template
                <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down':status.isCustomHeaderOpen, 'glyphicon-chevron-right':!status.isCustomHeaderOpen}"></i>
            </uib-accordion-heading>
            World
        </div>
        <div uib-accordion-group class="panel-danger" heading="Delete account">
            <p>Please, to delete your account, click the button below</p>
            <button class="btn btn-danger">Delete</button>
        </div>
        <div uib-accordion-group class="panel-default" is-open="status.open">
            <uib-accordion-heading>
                I can have markup, too!<i class="pull-right glyphicon" ng-class="{'glyphicon-cheron-down':status.open, 'glyphicon-chevron-right':!status.open}"></i>
            </uib-accordion-heading>
            This is just some content to illustrate fancy headings.
        </div>
        <div uib-accordion-group class="panel-default" heading="test for accordion">
            <pre>
                hei!hei!hei!
                hei!hei!hei!
            </pre>
        </div>
    </div>
    <script type="text/ng-template" id="group-template.html">
        <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 uib-accordion-header 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>
    </script>
</body>
</html>

主要的效果是显现一个类似面板的折叠，点击标题就会在下方展开内容。效果如图所示：
这里写图片描述

这个UI指令由两个指令构成：ui-accordion、ui-accordion-group。
需要注意的是ui-accordion-group必须包含在ui-accordion中，否则会报错。
ui-accordion中包含两个属性：
1、close-others表示的是在ui-accordion包含的ui-accordion-group在同一个时刻，只能有一个处于被展开的状态。也就是说，当你点开某一个ui-accordion-group的时候，其他的则会被关闭。
2、template-url
在ui-accordion-group中包含了四个属性：
1、heading:指定标题，也就是你点击的部分，当你点击后，下面的内容会被展开。
2、is-disabled：指定这个ui-accordion-group是否被禁用，也就是是否能被展开。
3、is-open: 这个ui-accordion-group的展开状态，通过这个属性可以设置它的打开和关闭。
4、template-url : 指定一个模板。