Question

我想在使用ng-repeat显示的表格中显示下拉列表。下拉列表是使用Foundation的dropdown.js构建的。

<tr ng-repeat="lead in leads | filter:filterText>
   <td>
        <input type="text" data-dropdown="dropdown-{[{lead.id}]}" 
         autocomplete="off"/>
    <ul id="dropdown-{[{lead.id}]}" class='f-dropdown' data-dropdown-content>
        <li>Dropdown List</li>
    </ul>
   </td>
</tr>

当我将输入+ ul放在ng-repeat之外时（减去添加的lead.id来定义ID）它可以正常工作，但是当它在ng-repeat基金会内部时会抛出这个错误：

Uncaught TypeError: Cannot read property 'is_hover' of undefined

在第46行悬停时，第53行悬停时，第31行，点击foundation.dropdown.js。

我100％确定这与在Angular.js应用程序启动之前启动Foundation的事实有关。我暂时通过手动将data-dropdown-init添加到下拉输入来解决这个问题，但我认为这不是很好。

欢迎任何方向。

这是一个模仿问题的傻瓜：http://plnkr.co/edit/fyTcPX17Fkbe8hSlUMtb?p=preview

Answer 1

一个非常简单的解决方案是使用Angular-Foundation，尽管它对你如何实现事情有相当的看法。

Answer 2

由于基础下拉函数在角度应用程序启动之前启动，因此会发生此错误。防止此错误的一种解决方法是在角度应用启动后添加HTML属性。只需修改

data-dropdown-content

到

ng-attr-data-dropdown-content="{{$index}}"

我遇到了同样的问题而且这个问题解决了它

在角度ng-repeat中使用粉底的下拉菜单

2 个答案: