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）