I cannot get nq-collapse to work as part of a ng-repeat. The following template:

nq-collapse error about quantumui HOT 1 CLOSED

sswainright commented on June 21, 2024

nq-collapse error

from quantumui.

Comments (1)

mehmetotkun commented on June 21, 2024

Because targetId option cannot be setted as template. {{}} markap need to be observed when an option has changable value. nqCollapse is not for this purpose.

You can use nqAccordion directive for repeated collapse. Here is example.
http://quantumui.org/appdoc/documents/quantumui/accordion/

Or, If you want to collapse each panel independently don't have lots of collapsiable panels, I advice you manage each one seperately.

However if it is important for you to use it with ngRepeat you need a custom accordion directive somthing like below.

  app.directive('myCustomAccordion', function () {
        return {
            restrict: 'A',
            compile: function(element, attr) {
                var children = element.find('> .panel');
                angular.forEach(children, function (child, key) {
                    var childEl = angular.element(child),
                    target = childEl.find('.panel-collapse');
                    if (target.length) {
                        var id = target.attr('id')
                        if (!id) {
                            id = 'mypanels' + Math.floor((Math.random() * 1000) + 1).toString()
                            target.attr('id', id)
                        }
                        var link = childEl.find('.panel-title > a');
                        if (!link.length)
                            link = childEl.find('.panel-title');
                        if (!link.length)
                            link = childEl.find('.panel-heading');
                        if (link.length) {
                            link.attr('target-id', '#' +id);
                            link.attr('nq-collapse', '');
                        }
                    }
                });
            }
        };
    })

and you html should be like below

 <div class="panel-group" data-my-custom-accordion="">
    <div class="panel panel-default" ng-repeat="product in selectedNode.Products">
          <div class="panel-heading">
                 <h4 class="panel-title">
                       <a role="button" tabindex="0">
                                {{product.DisplayName}}[{{product.ProductId}}]
                       </a>
                    </h4>
         </div>
         <div class="panel-collapse">
               <div class="panel-body">
                            {{product.LongDescription}}
                 </div>
        </div>
    </div>
</div>

from quantumui.

Recommend Projects