Angular ng-click在Bootstrap drowdown菜單中不起作用

我有一些基於Bootstrap 3下拉菜單的過濾器，但由於某些奇怪的原因，它們在實際的下拉菜單中不起作用，但是如果我將其複製粘貼並放置它外面它工作正常。Angular ng-click在Bootstrap drowdown菜單中不起作用

<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之前將其放置，但不是實際的下拉菜單內。

來源

2014-04-15 JavaCake

你能否證實ngClick工作沒有什麼有趣的，也許只是調用您的控制器上的功能？ – Beyers

如果我複製'Dumbbell'並將它添加到'table'下面就行了。我可以用它來確認它的功能嗎？ – JavaCake

不是，我試圖確定ngClick是否永遠不會被調用，即某些內容在下拉菜單中停止點擊事件傳播，或者其他事情正在進行。 – Beyers

myFilter正在設置爲child scope created byng-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

來源

2014-04-15 20:26:33

我將對象屬性添加到我的控制器，將'myFilter'改爲'my.filter'。當我點擊導航欄中的按鈕時，它只是清除結果，所以基本上'ng-click'現在觸發，但結果是空的。 – JavaCake

您遇到的另一個問題是'{{equipment.name}}'不會插入點擊表達式中。您應該將過濾器設置爲設備。看到我更新的plunkr。 –

再次更新plunk，將項目更改爲更像您的情況的對象。 –

Angular ng-click在Bootstrap drowdown菜單中不起作用

回答

相關問題