Question

我知道还有其他问题，但他们似乎无法解决我的问题。

这就是我的输出，我认为应该是手风琴 code output screeshot

我对Angular相当新，所以我可能会遗漏一些简单的东西，但我似乎无法看到它。这将进入我正在制作的更大的应用程序，但我想让它在第一个之外的工作。

感谢任何帮助。

代码：

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

编辑：是否与

有关

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

阻止？因为isopen可能不会绑定任何东西？

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

Answer 1

您的角度路径错误，例如，this可以完成工作。你可以从那里开始。

Answer 2

Ashesh说您的角度路径错误，您在Angular Ui Team上还有一个工作示例用于手风琴控制。

直播示例： http://plnkr.co/edit/6zhm49PCgPZr8wKD5Szr?p=preview

AngularUI手风琴菜单不显示

2 个答案: