0

I use nested uib-accordion, and I want add ng-click to each of uib-accordion.

      <uib-accordion close-others="oneAtATime1">
            <div uib-accordion-group class="panel-default" is-open="prInfo.isOpen" heading="{{prInfo.name}}"
                 ng-click="getPayrolls(prInfo)"
                 ng-repeat="prInfo in allPersonInfoNames">
                <uib-accordion close-others="oneAtATime2">
                    <div uib-accordion-group class="panel-default" heading="{{payroll.logPeriod.name}}"
                         ng-click="getPayroll(payroll)"
                         ng-repeat="payroll in prInfo.payrolls | orderBy: 'logPeriod.dbId': reverse = true">
                        <div class="row">
                            <div class="col-md-4">
                                <h1>in nested accordion</h1>
                            </div>
                        </div>
                    </div>
                </uib-accordion>
            </div>
        </uib-accordion>

So, when I click on first accordion, first ng-click work correctly, but when I click on second accordion, again first ng-click is called, and second ng-click never called.

I can solve this problem by adding second ng-click in body of accordion, but by this solution, I have to click 3 times to work second ng-click, first time for open the first accordion and run first ng-click, second time to open second accordion and third time click on function in nested accordion body to run second ng-click. How can I separate ng-click functions by first solution?

demo on plunker

mgh
  • 921
  • 3
  • 9
  • 37
  • 1
    In your plunkr this line is causing an error. $scope.allPersonInfoNames[1].payrolls.push({deposit: 999999}) because $scope.allPersonInfoNames[1] has no key payrolls. – user2263572 Dec 20 '16 at 13:49
  • The problem is fixed, but now when I click on second ng-click, two functions called again. – mgh Dec 20 '16 at 13:51

1 Answers1

1

The problem your facing seems to be related to this thread: AngularJS ng-click stopPropagation When you click on the second ng-click, you have to stop the event propagation to prevent the first method to be triggered.

I Hope it may help

Community
  • 1
  • 1
Tony
  • 482
  • 4
  • 13