Accordian UI.bootstrap angular doesnt show up on project

Question

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

These two pieces of code are exactly as taken from their site. The library files should already be downloaded from what the other programmer said to me, I'm just wondering if I have these in the right spot and if I am calling them correctly?

SCREENSHOT

Can you elaborate on how this fails? Just a blank page? Page not responsive? — ryanyuyu, Nov 13 '15 at 13:46
Is your javascript snippet the entirety of `example.js`? If so, it looks like you are referring to a non-existent `ui-bootstrap-demo` module instead of creating it... — Starscream1984, Nov 13 '15 at 13:49
You totally shouldn't have that `
` tag in between the `` and `` tags either, it should be _inside_ your `` — Starscream1984, Nov 13 '15 at 13:51
as far as I rememeber, you have also to include jquery before angularjs libs. — Diana R, Nov 13 '15 at 13:52
Nope, you only have to include jQuery first if you are specifically using it alongside Angular. That doesn't seem to be the case in this instance, Angular works fine (better!) without jQuery loaded. — Starscream1984, Nov 13 '15 at 13:54
It just not there. no accordian. the insides of them are there tho as plain text. if you go to https://angular-ui.github.io/bootstrap/#/accordion, i want dynamic body content. one more thing all of the uib-accordion, and uib-accordion-group all have squiggly lines under them and say "unknown element "element name" or element cannot be placed here." which leads me to believe i need to create these functions somewhere like a css file or something. — Edgar, Nov 13 '15 at 14:02
@Edgar the accortion from bootstrap for sure needs jquery lib. add before angularjs.min and you will see that the error should be gone. — Diana R, Nov 13 '15 at 14:06
@DianaR nope nope nope - jQuery is not required for Angular, Angular-Animate or UIBootstrap. Regular bootstrap needs it, but the whole point of UIBootstrap is to be able to use bootstrap CSS without needing jQuery — Starscream1984, Nov 13 '15 at 14:12
@Edgar please ignore jQuery - do you see any errors in your browser's console? — Starscream1984, Nov 13 '15 at 14:13
@Starscream1984 you are right, apologize. I was getting some issue due to jquery missing lib when I was using accortions and it mislead me when I was looking at this question. — Diana R, Nov 13 '15 at 16:10
@Edgar - your snippets don't seem to tell the whole story, as the errors clearly complain about a controller definition that does not appear in any of the code. First step should be eliminating console errors. — Starscream1984, Nov 13 '15 at 17:28

score 0 · Answer 1 · answered Nov 13 '15 at 16:07

Change your module declaration to inject bootstrap:

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

Here is a working version.

But your console error is pointing to other controller, not the one in your question, so either add it here, or remove it from your app where you test the code from your question.

Accordian UI.bootstrap angular doesnt show up on project

1 Answers1