Question

我试图实现类似的内容：

http://embed.plnkr.co/3y0Rq1/

管道全部连接，组正在输出，每个组都获得了类ng-scope，但我的HTML没有获得类accordion-group。它取而代之的是ng-binding。此外，我的HTML呈现为<accordion-group>和<accordion-heading>，而不是<div>。我认为这是关键，但我不知道它为什么会发生。我添加手风琴的应用程序似乎已经具有正确的文件引用，尽管版本比我提供的链接中的示例更新。最终结果是呈现的HTML只是文本。它没有正确格式化，也没有像手风琴一样扩展和收缩。这是我的代码。

Index.cshtml中的引用（该应用程序是从ASP.NET MVC启动的）：

maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
~/Content/dist/css/app.css
code.jquery.com/jquery-2.2.4.min.js
maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js
ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.js
ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-cookies.min.js
cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.7/angular-sanitize.min.js
Scripts/angular-sortable-view.js
~/Scripts/angular-auto-focus.js
Scripts/ui-bootstrap-custom-tpls-2.0.1.min.js
~/Content/dist/js/app.min.js
~/Scripts/angular-img-http-src.js

Accordion.js

(function (angular) {
    angular.module("profilebuilder")
        .controller("Accordion",
            [
                "$scope", function($scope) {
                    $scope.groups = [
                        {
                            title: "Dynamic Group Header - 1",
                            content: "Dynamic Group Body - 1",
                            open: false
                        },
                        {
                            title: "Dynamic Group Header - 2",
                            content: "Dynamic Group Body - 2",
                            open: false
                        }
                    ];
                }
            ]);
}(angular));

HTML：

<div class="SearchCriteria" ng-controller="Accordion">
    <accordion>
        <accordion-group ng-repeat="group in groups" heading="{{group.title}}" is-open="group.open">
            <accordion-heading>
                {{group.title}}
            </accordion-heading>
            {{group.content}}
        </accordion-group>    
    </accordion>
</div>

更正HTML：

HTML不正确：

Answer 1

问题是您使用的ui.bootstrap

版本

这个html会起作用

<uib-accordion close-others="oneAtATime">
  <div uib-accordion-group class="panel-default" heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
    </div>
  </uib-accordion>

以下是plknr机智示例

的链接

正确的类没有附加到angularjs手风琴和HTML没有正确呈现

1 个答案: