[AngularJS]UI Bootstrap

UI Bootstrap 是 AngularUI Team 提供可以與 Bootstrap 結合的 AngularJS module

注意：因為 UI Bootstrap 的版面部份還是依賴 Bootstrap 的 css，因此使用前還是需要下載 Bootstrap 的 css 和 fonts

bower 安裝

bower install angular-bootstrap

注意：因為有些 module 會用到 template ，所以記得引入 ui-bootstrap-tpls.min.js

補充：Bootstrap 中，特定的 class 有時並不會是 HTML 的 a 元素，因此在畫面上就不會有滑鼠連結的指標出現，UI Bootstrap 官網建議可以自行手動補上

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

引入 AngularJS 中 引入 UI Bootstrap

var ballApp = angular.module('BallApp', ['ui.bootstrap']);

Accordion 範例
HTML

<div ng-controller="AccordionDemoCtrl">
    <p>
        <button class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
        <button class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
    </p>
    <label class="checkbox">
        <input type="checkbox" ng-model="oneAtATime">
        Open only one at a time
    </label>
    <accordion close-others="oneAtATime">
        <accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
            This content is straight in the template.
        </accordion-group>
        <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
            {{group.content}}
        </accordion-group>
        <accordion-group heading="Dynamic Body Content">
            <p>The body of the accordion group grows to fit the contents</p>
            <button class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
            <div ng-repeat="item in items">{{item}}</div>
        </accordion-group>
        <accordion-group is-open="status.open">
            <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>
            </accordion-heading>
            This is just some content to illustrate fancy headings.
        </accordion-group>
    </accordion>
</div>

Javascript

var ballApp = angular.module('BallApp', ['ui.bootstrap']);
ballApp.controller('AccordionDemoCtrl', 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
    };

});