m_shige1979のときどきITブログ

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

Github(変なおっさんの顔でるので気をつけてね)

https://github.com/mshige1979

angularjsでui-bootstrapを使用

angularjsのtwitterbootstrap版

cssの部分はともかくformのモーダルダイアログとかあとはカレンダーとか出したいけどどうするの?

的な対応かと

準備

twitter bootstrapのファイル
angularjs

よりそれぞれcssやjsファイルとダウンロードし

それと
http://angular-ui.github.io/bootstrap/
よりダウンロード

実装

index.html
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript" src="js/ui-bootstrap-tpls-0.12.0.min.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </head>
    <body ng-app="sampleApp">
        <div class="content">
            <h1>テスト1</h1>
            <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>
        </div>

    </body>
</html>
app.js
var sampleApp = angular.module('sampleApp', ['ui.bootstrap']);

sampleApp.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
    };
});


公式サイトのサンプルを載せただけです

結果

f:id:m_shige1979:20141202223257p:plain

所感

angularjsを使用する際、カレンダーとかダイアログとかどうしようかと迷っていましたがこれで結構やりやすくなりました。
このようなものがあるということには感謝します(^_^;)