0

HTML：

<!DOCTYPE html>
<html ng-app="ui.bootstrap.demo">
    <head>
        <title></title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js">   </script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
        <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
        <script src="example.js"></script>
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    </head>        
    <body>
        <div ng-controller="AccordionDemoCtrl">
            <script type="text/ng-template" id="group-template.html">
                <div class="panel {{panelClass || 'panel-default'}}">
                    <div class="panel-heading">
                        <h4 class="panel-title" style="color:#fa39c3">
                            <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
                                <span ng-class="{'text-muted': isDisabled}">{{heading}}</span>
                            </a>
                        </h4>
                    </div>
                    <div class="panel-collapse collapse" uib-collapse="!isOpen">
                        <div class="panel-body" style="text-align: right" ng-transclude></div>
                    </div>
                </div>
            </script>

            <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="Custom template" template-url="group-template.html">
                    Hello
                </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>
        </div>
    </body>
</html>

Javascript：

angular.module('ui.bootstrap.demo').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
    };
});

这两段代码与他们的网站完全相同。库文件应该已经从其他程序员对我说的内容中下载了，我只是想知道我是否将这些放在正确的位置以及是否正确调用它们？

截屏 在此处输入图像描述

4

1 回答 1

0

更改您的模块声明以注入引导程序：

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);

这是一个工作版本。

但是您的控制台错误指向其他控制器，而不是您问题中的控制器，因此要么在此处添加它，要么将其从您测试问题代码的应用程序中删除。

于 2015-11-13T16:07:17.343 回答