CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
The Head Rush
The Head Rush

Reputation: 3356

Programmatically Open Bootstrap UI Accordion Generated by Nested Ng-Repeat when Filtered Array is Not Empty

I have a Bootstrap-UI accordion group that generates individual accordion menus using ng-repeat. The content under each accordion is also generated using a nested ng-repeat.

<accordion close-others="false">
        <span data-ng-repeat="category in categories">
            <accordion-group is-open="filterText.length > 0">
                <accordion-heading>{{category}}: {{reportList.length}} Items </accordion-heading>
                <div>
                    <ul>
                        <li data-ng-repeat="report in reportList = (getReports($parent.$index) | filter: filterText)">{{report}}</li>
                    </ul>
                </div>
            </accordion-group>
        </span>
    </accordion>

The content generated by the second ng-repeat needs to be searchable. When the search is executed, accordions that contain matching values should open and display the matching values. I know that the outside ng-repeat sees the filtered array and its length because i can display the length value in the view (i.e. {{reportList.length}} updates when the filter executes).

The problem comes when i try to put the reportList.length value in the is-open attribute of an <accordion-group>. Using is-open="reportList.length" seems to pass the literal into the directive. In desperation, I tried using is-open="{{reportList.length}}" but that throws the expected syntax error.

Here's a plunker that shows what i have working as well commented out lines that show the way i think it should work (lines 22 & 23). Any suggestions are more than welcome.

Upvotes: 1

Views: 1260

Answers (2)

Mike K
Mike K

Reputation: 1313

What you bind the is-open to, Angular needs to be able to assign to it, not just evaluate it. It can evaluate an expression like "foo == 5" but it cannot assign to it.

What I do is create a variable and bind to that, then the accordion can change it, and I can change it, and everybody's happy.

$scope.accordionSettings = {
IsOpen: {
    Section1: true,
    Section2: false
}};

In the markup:

<div uib-accordion-group is-open="accordionSettings.IsOpen.Section1">
   ...  more markup ...
<div uib-accordion-group is-open="accordionSettings.IsOpen.Section2">

Upvotes: 1

Rob J
Rob J

Reputation: 6629

Your binding is-open inside of an ng-repeat which creates a child scope for each item (category). You need to bind to $parent.filterText.length as filterText is not a category property.

Upvotes: 2

Related Questions