2

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.

JavaCake
  • 4,075
  • 14
  • 62
  • 125
  • Can you confirm that ngClick works without anything funny, maybe just calling a function on your controller? – Beyers Apr 15 '14 at 20:21
  • If i copy `Dumbbell` and add it below the `table` it works. Can i use this to confirm its functionality? – JavaCake Apr 15 '14 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 Apr 15 '14 at 20:29

1 Answers1

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

j.wittwer
  • 9,497
  • 3
  • 30
  • 32
  • 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. – JavaCake Apr 15 '14 at 20:34
  • 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 Apr 15 '14 at 20:42
  • Updated plunk again, changing items to objects more like your situation. – j.wittwer Apr 15 '14 at 20:55
  • That did the trick, so if i have multiple filters i wish to combine, these can just be added to the filter? – JavaCake Apr 15 '14 at 21:02
  • 1
    Check out this post for more info about filtering http://stackoverflow.com/questions/14733136/angular-js-ng-repeat-filter-by-single-field. Also see http://docs.angularjs.org/api/ng/filter/filter for details about specifying multiple properties to filter by, in the object form of the expression parameter. – j.wittwer Apr 15 '14 at 21:10