AngularJS - мне нужен аккордеон с возможностью одновременного открытия нескольких панелей

Question

У меня есть директива JS Fiddle expample с возможностью открыть одну панель за раз, мне нужно изменить это поведение и дать пользователю возможность открыть несколько панелей.

Здесь ниже вы увидите код, который является таким же на моем 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);
            });
        }
    };
})

Что я могу сделать?

Answer 1

Вам просто нужно удалить data-parent атрибут ( ДЕМО):

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

Answer 2

Этот вопрос ИМО является прекрасным примером не использования угловых скважин. Я бы предложил удалить всю директиву и jQuery, так как они не нужны для простого аккордеона (то есть angular идеально подходит для этого типа пользовательского интерфейса). Вот обновленная версия:

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

Answer 3

Это?

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

Прокомментировал эту строку:

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