CODEWITHSUNDEEP
angularjstwitter-bootstrap
JavaCake
JavaCake

Reputation: 4115

Angular ng-click does not work in Bootstrap drowdown menu

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.

Upvotes: 2

Views: 3371

Answers (1)

j.wittwer
j.wittwer

Reputation: 9497

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

Upvotes: 3

Related Questions