AngularJS - 我需要一个手风琴，可以选择让多个面板打开

I have this directive JS Fiddle expample with the option to open one panel at the time, I need to modify that behavior and give to the user the option to have multiple panels open.

我有这个指令JS Fiddle示例，当时打开一个面板的选项，我需要修改该行为并向用户提供打开多个面板的选项。

Here below you will see the code which is the same on my JS Fiddle Expamle

在下面，您将看到我的JS Fiddle Expamle上的代码相同

    directive("btstAccordion", function () {
    return {
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {},
        template:
            "<div class='accordion' ng-transclude></div>",
        link: function (scope, element, attrs) {

            // give this element a unique id
            var id = element.attr("id");
            if (!id) {
                id = "btst-acc" + scope.$id;
                element.attr("id", id);
            }

            // set data-parent on accordion-toggle elements
            var arr = element.find(".accordion-toggle");
            for (var i = 0; i < arr.length; i++) {
                $(arr[i]).attr("data-parent", "#" + id);
                $(arr[i]).attr("href", "#" + id + "collapse" + i);
            }
            arr = element.find(".accordion-body");
            $(arr[0]).addClass("in"); // expand first pane
            for (var i = 0; i < arr.length; i++) {
                $(arr[i]).attr("id", id + "collapse" + i);
            }
        },
        controller: function () {}
    };
}).
directive('btstPane', function () {
    return {
        require: "^btstAccordion",
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {
            title: "@",
            category: "=",
            order: "="
        },
        template:
            "<div class='accordion-group' >" +
            "  <div class='accordion-heading'>" +
            "    <a class='accordion-toggle' data-toggle='collapse'> {{category.name}} - </a>" +

            "  </div>" +
            "<div class='accordion-body collapse'>" +
            "  <div class='accordion-inner' ng-transclude></div>" +
            "  </div>" +
            "</div>",
        link: function (scope, element, attrs) {
            scope.$watch("title", function () {
                // NOTE: this requires jQuery (jQLite won't do html)
                var hdr = element.find(".accordion-toggle");
                hdr.html(scope.title);
            });
        }
    };
})

What can I do ?

我能做什么？

3 个解决方案

#1

You just need to remove the data-parent attribute (DEMO):

您只需要删除data-parent属性（DEMO）：

//...
// set data-parent on accordion-toggle elements
var arr = element.find(".accordion-toggle");
for (var i = 0; i < arr.length; i++) {
    //$(arr[i]).attr("data-parent", "#" + id);          <------- here
    $(arr[i]).attr("href", "#" + id + "collapse" + i);
}
//...

#2

This question IMO is a perfect example of not using angular well. I would suggest removing the entire directive, and jQuery, as they are unnecessary for a simple accordion (i.e. angular is perfect for this type of ui). Here is an updated version:

这个问题IMO是不使用角度良好的完美示例。我建议删除整个指令和jQuery，因为它们对于简单的手风琴来说是不必要的（即角度对于这种类型的ui是完美的）。这是一个更新版本：

http://jsfiddle.net/MTKp7/131/

Now I have left it as verbose as possible so that you can make the choice about how you should abstract it (by using ng-repeat mixed with ng-include for example). I have also left the dependencies on the libraries so that the styles are preserved, but these are also not difficult to grab.

现在我把它保留为尽可能详细，以便你可以选择如何抽象它（通过使用与ng-include混合的ng-repeat）。我还保留了库的依赖关系，以便保留样式，但这些也不难获取。

Here is the basic example of how you could create this functionality. The div structure and classes were only left to match the jQuery object.

以下是如何创建此功能的基本示例。 div结构和类只留下来匹配jQuery对象。

<div class="accordion" ng-controller="AccordionCtrl">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" ng-click="toggle('a')">test</a>
        </div>
        <div class="accordion-body">
            <div class="accordion-inner" ng-show="show.a">
                <div>Anim pariatur cliche reprehenderit, enim eiusmod high life 
            accusamus terry richardson ad squid. 3 wolf moon officia aute,
            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
            laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
            on it squid single-origin coffee nulla assumenda shoreditch et.
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
            cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
            vice lomo. Leggings occaecat craft beer farm-to-table, raw 
            denim aesthetic synth nesciunt you probably haven't heard of 
            them accusamus labore sustainable VHS.</div>
            </div>
        </div>
    </div>
</div>

And for toggling:

并切换：

$scope.toggle = function(index) {
    $scope.show[index] = !$scope.show[index];
};

#3

This?

这个？

http://jsfiddle.net/MTKp7/129/

Commented this line:

评论这一行：

//$(arr[i]).attr("data-parent", "#" + id);

#1