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.

`is-open` is an [attribute and not a property](http://stackoverflow.com/questions/5874652/prop-vs-attr#answer-5884994). — Stryner, Mar 10 '16 at 18:23
@Stryner Using `attr` doesn't work either. What do you suggest I use? — LCIII, Mar 10 '16 at 18:30
When inspecting the element, [it works for me](https://jsfiddle.net/t37uuoju/1/). — Stryner, Mar 10 '16 at 18:34
@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, Mar 10 '16 at 19:11

Pankaj Parkar · Accepted Answer · 2016-03-10T18:36:54.343

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

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. — LCIII, Mar 10 '16 at 20:12
@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: '='`) — Pankaj Parkar, Mar 10 '16 at 20:15

How to change Angular-UI element property with Jquery

1 Answers1