angularJs-UI-bootstrap系列教程2（According）

　　废话不说上代码　　

angular.module('MyApp', ['ngAnimate', 'ngTouch', 'ui.bootstrap'])

        .controller('accordionCtrl', ['$scope', function($scope) {

            $scope.oneAtATime = 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', 'Item 2', 'Item 3'];

            $scope.addItem = function() {

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

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

            };

            $scope.status = {

                isFirstOpen: true,

                isFirstDisabled: false

            };

        }])

　

<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 class="checkbox">

        <label>

            <input type="checkbox" ng-model="oneAtATime"> Open only one at a time

        </label>

    </div>

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

        <uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">

            This content is straight in the template.

        </uib-accordion-group>

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

            {{group.content}}

        </uib-accordion-group>

        <uib-accordion-group 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>

        </uib-accordion-group>

        <uib-accordion-group heading="Delete account" panel-class="panel-danger">

            <p>Please, to delete your account, click the button below</p>

            <button class="btn btn-danger">Delete</button>

        </uib-accordion-group>

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

            <uib-accordion-heading>

                I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>

            </uib-accordion-heading>

            This is just some content to illustrate fancy headings.

        </uib-accordion-group>

    </uib-accordion>

　　讲解一下，首先是模块的依赖要导入进来，这点要注意三个依赖都需要

　　然后就是Accordion 分为两个部分

　　　　1.uib-accordion

　　　　　　close-others：支持表达式和常量（默认：true), 只允许打开一个？

　　　　　　template-url:（默认template/accordion/accordion.html）模板地址

　　　　2.uib-accordion-group

　　　　　　heading ： 默认（空）

　　　　　　is-open：支持表达式，并且可$watch（默认:false）

　　　　　　is-disabled:支持表达式，并且可$watch（默认:false）

　　　　　　panel-class : 可$watch（默认：panel-default）

　　　　　　template-url ： （默认：uib/template/accordion/accordion-group.html）