AngularUI accordion menu not displaying

StackOverflow https://stackoverflow.com/questions/22530591

  •  18-06-2023
  •  | 
  •  

Question

I know there are other questions about this but they don't seem to solve my problem.

This what my output is, and I thought it should be an accordion code output screeshot

I am fairly new to Angular so I may be missing something simple, but I can't seem to see it. This is going to go into a larger app that I am making, but I wanted to get it to work outside of that first.

Any help is appreciated.

Code:

demo.html

<!DOCTYPE html>
<html ng-app='myApp' >
<head>

    <script src="js/app.js"></script>
    <script scr="js/ui-bootstrap-tpls-0.10.0"></script>
    <script src="js/angular.js"></script>
    <link href="css/bootstrap.css" rel="stylesheet">
    <title>Accordion Test</title>

</head>
<body>

<div class="col-md-3">
    <div ng-controller="AccordionDemo">
        <label class="checkbox">
            <input type="checkbox" ng-model="oneAtATime">
            Only open one at a time
        </label>

    <accordion close-others="oneAtATime">
            <accordion-group heading="Item1" is-open="true">
                the contenct of item one
            </accordion-group>

            <accordion-group heading = {{group.title}} ng-repeat="group in groups">
              {{group.content}}
            </accordion-group>

            <accordion-group heading="{{dynamicitem}}">
                <p>The body of the accordion group lol</p>
                <button class="btn btn-default btn-lg glyphicon glyphicon-plus-sign"     ng-click="addItem()">Add new items</button>
                <div ng-repeat="item in items">{{item}}</div>
            </accordion-group>

            <accordion-group is-open="isopen">
                <accordion-heading>
                    Open and Close <i class="pull-right glyphicon" ng-class="    {'glyphicon-chevron-down':isopen, 'glyphicon-chevron-right': !isopen} "></i>
                </accordion-heading>
                Your content is here
            </accordion-group>
        </accordion>
    </div>
</div>

app.js

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

function AccordionDemo($scope){
$scope.oneAtATime = true;
$scope.groups = [
    {
      title: "Dynamic member 1",
      content: "member 1 body"
    },
    {
      title :"Dynamic member 2",
      content :"member 2 body"
    }
];

$scope.dynamicitem = 'Dynamic Item';
$scope.items = ['item 1', 'item 2', 'item 3'];
$scope.addItem = function(){
  var newItem = $scope.items.length + 1;
    $scope.items.push('Item' + newItem);
};
}

Edit: Is it anything to do with the 

<accordion-group is-open="isopen">

block? As the isopen might not bind to anything?

Plunk http://plnkr.co/edit/npZ35bGLiPkmVqaw5l4J?p=preview

Was it helpful?

Solution

as Ashesh said you had the angular paths wrong, you also have a working example on Angular Ui Team for the accordion control.

live example: http://plnkr.co/edit/6zhm49PCgPZr8wKD5Szr?p=preview

OTHER TIPS

You had the angular paths wrong, this, for example, gets the job done. You can start from there.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top