nq-collapse error

[sswainright]

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

                <div class="panel-group" ng-repeat="product in selectedNode.Products">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a href nq-collapse="" data-target-id="#buildTeam_{{product.ProductId}}">
                                    {{product.DisplayName}}[{{product.ProductId}}]
                                </a>
                            </h4>
                        </div>
                        <div class="panel-body" id="buildTeam_{{product.ProductId}}">
                            {{product.LongDescription}}
                        </div>
                    </div>

throws this error in the console:

Error: Syntax error, unrecognized expression: #buildTeam_{{product.ProductId}}
at Function.Sizzle.error (http://localhost:60000/Scripts/jquery.js:1437:8)
at Sizzle.tokenize (http://localhost:60000/Scripts/jquery.js:2051:11)
at Sizzle.select (http://localhost:60000/Scripts/jquery.js:2452:20)
at Function.Sizzle (http://localhost:60000/Scripts/jquery.js:843:9)
at jQuery.fn.extend.find (http://localhost:60000/Scripts/jquery.js:2668:11)
at jQuery.fn.init (http://localhost:60000/Scripts/jquery.js:2776:38)
at Object.jQuery as element
at Object.b.module.provider.directive.directive.compile (http://localhost:60000/vendor/quantum/js/quantumui.min.js:6:834)
at applyDirectivesToNode (http://localhost:60000/Scripts/angular.js:7452:32)
at compileNodes (http://localhost:60000/Scripts/angular.js:6997:15)

[mehmetotkun]

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>