angularJs-UI-bootstrap系列教程1（使用前的准备）

最新推荐文章于 2024-08-21 09:12:43 发布

hsany330

最新推荐文章于 2024-08-21 09:12:43 发布

阅读量1.6k

点赞数

之前一直想看看angular中Ui-bootstrap是如何使用的，但是苦于网站被墙了，一直看不到，最近偷偷的到墙外面看了一下文档，大致的了解了如何使用，在这里写这边文章主要就是为了那些被墙了的angularJs程序员们，了解下ui-bootstrap，以后我都会简称uib，首先发个ui-bootstrap的首页先

　　http://angular-ui.github.io/bootstrap/ （没什么意外是访问不到的）

　　事前准备工作开始

　　首先介绍uib的文件：

　　这是uib的两个angular文件(如果访问不到请在地址前面加http:)

<script src="//cdn.bootcss.com/angular-ui-bootstrap/1.2.5/ui-bootstrap-tpls.js"></script>

<script src="//cdn.bootcss.com/angular-ui-bootstrap/1.2.5/ui-bootstrap.js"></script>

　　这两个文件中有tpl的是包含模板的，没有tpl的是不包含模板的，一般引入包含模板的uib文件

　　然后是uib的依赖文件，一共有四个

　　 1.angular.js（1.4.x）

　　 2.angular-animate.js

　　 3.angular-touch.js

　　 4.bootstrap.css

　　那么使用uib就是要五个文件　　　　

　　　 1.angular.js（1.4.x）

　　 2.angular-animate.js

　　 3.angular-touch.js

4.ui-bootstrap-tpls.js

　　 5.bootstrap.css

　　好了，就讲到uib的准备工作就写到这里了下面会为大家讲一下如何使用组件

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>