handling toggle functionality in AngularJs

Question

I am pretty new to AngularJs. I have to toggle a section and used the ng-click like below:

                  <div class="panel panel-secondary scroll" href="#feedList-os" class="collapsedOs" ng-model="collapsedOs" ng-click="collapsedOs=!collapsedOs">
                      <ul id="feedList-app" class="list-group" ng-show="collapsedOs">
                        <li class="list-group-item clearfix">
                            <div class="panel panel-container scroll">
                               <button id="details" class="btn btn-danger" data-toggle="modal" data-target="#myModal">Details</button>
                            </div>
                        </li>
                    </ul>
                </div>

This is working fine as expected, but I have a button inside the div with class panel panel-container scroll has a button. I do not want the toggle logic to be applied for clicking the button. Even if I override the ng-click on the button, that's not overriding the default functionality.

Chandermani · Accepted Answer · 2015-05-18 08:37:11Z

1

If you add ng-click on the inner button, you can pass in an event object $event.

 <button id="details" class="btn btn-danger" data-toggle="modal" data-target="#myModal" ng-click='doWork($event)'>Details</button>

In the handler code you can do prevent bubble through for this event.

$scope.doWork($event) {
   $event.stopPropagation 
}

answered May 18, 2015 at 8:37

Chandermani

42.7k12 gold badges87 silver badges89 bronze badges

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

Collectives™ on Stack Overflow

handling toggle functionality in AngularJs

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related