Angular ng-click does not work in Bootstrap drowdown menu

Question

I have some filters based on the Bootstrap 3 dropdown menu, but for some odd reason they do not work in the actual dropdown menu, but if i copy-paste it and place it outside it works fine.

<div ng-app="App" ng-controller="ExerciseCtrl" >
    <div class="btn-group" ng-class="{open: open}">
        <button type="button" class="btn btn-default dropdown-toggle" ng-click="open=!open">Equipment <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li ng-repeat="equipment in equipments">
                <a href ng-click="myFilter = {equipment:'{%verbatim%}{{equipment.name}}{%endverbatim%}'}">{%verbatim%}{{equipment.name}}{%endverbatim%}</a>
            </li>
        </ul>
    </div>    

    <table class="table table-hover" >
        <tr><td><strong>Name</strong></td><td><strong>Main muscle</strong></td><td><strong>Equipment</strong></td></tr>
        <tr ng-repeat="exercise in exercises | filter:myFilter | orderBy:orderProp">
            {%verbatim%}<td>{{exercise.name}}</td><td>{{exercise.main_muscle.name}}</td><td>{{exercise.equipment.name}}</td>{%endverbatim%}
        </tr>
    </table>
</div>

One menu item looks like following:

<li ng-repeat="equipment in equipments" class="ng-scope">
     <a href="" ng-click="myFilter = {equipment:'Dumbbell'}" class="ng-binding">Dumbbell</a>
</li>

So basically if i pull out the alink and place it before the table it works, but not inside the actual dropdown menu.

Can you confirm that ngClick works without anything funny, maybe just calling a function on your controller? — Beyers
– Beyers, Commented Apr 15, 2014 at 20:21
If i copy <a href="" ng-click="myFilter = {equipment:'Dumbbell'}" class="ng-binding">Dumbbell</a> and add it below the table it works. Can i use this to confirm its functionality? — JavaCake
– JavaCake, Commented Apr 15, 2014 at 20:23
Not really, I'm trying to determine if ngClick is never called, i.e. something is stopping click event propagation inside the dropdown, or something else is going on. — Beyers
– Beyers, Commented Apr 15, 2014 at 20:29

j.wittwer · Accepted Answer · 2014-04-15 21:01:14Z

3

myFilter is being set on a child scope created by ng-repeat, and is not visible to your table. Try using an object property, such as my.filter, instead.

$scope.my = {
  filter: ''
}

html:

<li ng-repeat="equipment in equipments">
  <a href ng-click="my.filter = equipment.name">...</a>
</li>
...
<tr ng-repeat="exercise in exercises | filter:{ name: my.filter} ...

Here is a demo: http://plnkr.co/edit/ogfe7MxRRIovTG9bQCWN?p=preview

edited Apr 15, 2014 at 21:01

answered Apr 15, 2014 at 20:26

j.wittwer

9,4973 gold badges32 silver badges32 bronze badges

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

5 Comments

JavaCake Over a year ago

I added the object property to my controller, changed myFilter to my.filter. When i click the buttons in the navbar it just clears the result, so basically the ng-click fires now, but the result is empty.

j.wittwer Over a year ago

The other problem you'll have is that the {{equipment.name}} won't be interpolated inside the click expression. You should just set the filter to equipment. See my updated plunkr.

j.wittwer Over a year ago

Updated plunk again, changing items to objects more like your situation.

JavaCake Over a year ago

That did the trick, so if i have multiple filters i wish to combine, these can just be added to the filter?

j.wittwer Over a year ago

Check out this post for more info about filtering stackoverflow.com/questions/14733136/…. Also see docs.angularjs.org/api/ng/filter/filter for details about specifying multiple properties to filter by, in the object form of the expression parameter.

Collectives™ on Stack Overflow

Angular ng-click does not work in Bootstrap drowdown menu

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related