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

AngularJS - I need an accordion with the option to have multiple panels open at the time

本文关键字：选择 当时 手风琴 AngularJS 一个      更新时间：2023-09-26

我有这个指令 JS Fiddle 扩展，可以选择一次打开一个面板，我需要修改该行为并为用户提供打开多个面板的选项。

在下面，您将看到在我的 JS 小提琴 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);
            });
        }
    };
})

我能做什么？

你只需要删除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);
}
//...

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

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

现在我让它尽可能冗长，以便您可以选择如何抽象它(例如，通过使用 ng-repeat 与 ng-include 混合(。我还保留了对库的依赖关系，以便保留样式，但这些也不难抓住。

下面是如何创建此功能的基本示例。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>

对于切换：

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

这个？

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

评论了这一行：

//$(arr[i]).attr("data-parent", "#" + id);
相关文章：