角NG-点击不引导drowdown菜单操作 [英] Angular ng-click does not work in Bootstrap drowdown menu

问题描述

我有依据的引导3下拉菜单一些过滤器，但对于一些奇怪的原因，他们不会在实际下拉菜单中工作，但如果我复制粘贴它，并把它外面正常工作。

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>

所以基本上，如果我拉出 A 链接和表它的工作原理之前，将其放置，而不是里面实际的下拉菜单。

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

推荐答案

myFilter 正在上的子由 NG-重复创建范围，而不是你的表可见。尝试使用一个对象的属性，如 my.filter 代替。

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

下面是一个演示： http://plnkr.co/edit/ogfe7MxRRIovTG9bQCWN？ p = preVIEW

这篇关于角NG-点击不引导drowdown菜单操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！