How to change Angular-UI element property with Jquery

Question

I'm trying to have a simple accordion with two buttons at the top: one button that opens every panel and one that collapses them.

I'm trying to use jQuery's prop method to alter the is-open property on each uib-accordion element, but nothing happens when I click on either button.

<div ng-controller="AccordionController">
    <p>
        <button type="button" class="btn btn-default btn-sm" ng-click="openAll()">Open All</button>
        <button type="button" class="btn btn-default btn-sm" ng-click="collapseAll()">Collapse All</button>
    </p>
    <uib-accordion close-others="false">
        <uib-accordion-group class="accordionGroup" ng-repeat="xmlResult in xmlResults" is-open="false">
            <uib-accordion-heading>
                //heading...
            </uib-accordion-heading>
            //content...
        </uib-accordion-group>
    </uib-accordion>
</div>

Here is my controller

angular.module("ResultsTreeViewer").controller("AccordionController", function ($scope) {

    $scope.openAll = function () {
        $(".accordionGroup").prop("is-open", true);
    };
    $scope.collapseAll = function () {
        $(".accordionGroup").prop("is-open", false);
    }
});

I'd love an Angular only solution but that isn't necessary. I just want it to work.

@Stryner Using attr doesn't work either. What do you suggest I use? — LCIII
– LCIII, Commented Mar 10, 2016 at 18:30
@Stryner I see that it updated the is-open attribute, but it's not opening or closing any of the accordions. I suppose the answer to that is beyond the scope of this question. — LCIII
– LCIII, Commented Mar 10, 2016 at 19:11

Pankaj Parkar · Accepted Answer · 2016-03-10 18:36:54Z

1

I'll say that don't use jQuery with Angular, inside controller.

Rather have isOpen variable inside each accordion record and then make it true & false by calling single function actionAccordion function(Make sense to have it in angular way).

Markup

<p>
    <button type="button" class="btn btn-default btn-sm" ng-click="actionAccordion(true)">Open All</button>
    <button type="button" class="btn btn-default btn-sm" ng-click="actionAccordion(false)">Collapse All</button>
</p>
<uib-accordion close-others="false">
    <uib-accordion-group class="accordionGroup" ng-repeat="xmlResult in xmlResults" 
      is-open="xmlResult.isOpen">
        <uib-accordion-heading>
            //heading...
        </uib-accordion-heading>
        //content...
    </uib-accordion-group>
</uib-accordion>

Code

$scope.actionAccordion = function (flag) {
    angular.forEach($scope.xmlResults, function(xmlResult){
        xmlResults.isOpen = flag;
    })
};

edited Mar 10, 2016 at 18:36

answered Mar 10, 2016 at 18:31

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LCIII Over a year ago

This is as correct as an answer can get for my question because the is-open property can only accept an angular object, not a string literal.

Pankaj Parkar Over a year ago

@LCIII yupe.. internally accordion directive has isOpen variable with it... it toggle whenever he wanted to show & hide(this toggling process can happen from both side, because accordion binded with isOpen: '=')

Collectives™ on Stack Overflow

How to change Angular-UI element property with Jquery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related