Question

我有一些基于Bootstrap 3下拉菜单的过滤器，但由于一些奇怪的原因，它们在实际的下拉菜单中不起作用，但是如果我复制粘贴并将其放在外面它工作正常。

<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>

一个菜单项如下：

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

所以基本上如果我拉出a链接并将其放在table之前，但不在实际的下拉菜单中。

Answer 1

myFilter设置在child scope created by ng-repeat上，对您的表格不可见。请尝试使用对象属性，例如my.filter。

$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} ...

以下是演示：http://plnkr.co/edit/ogfe7MxRRIovTG9bQCWN?p=preview

Angular ng-click在Bootstrap下拉菜单中不起作用

1 个答案: