在角度 ng-repeat 中使用基础的下拉菜单

Posted 2023-02-19

【中文标题】在角度 ng-repeat 中使用基础的下拉菜单

【英文标题】：Using foundation's dropdowns within angular ng-repeat

【发布时间】：2014-01-02 23:39:21

【问题描述】：

我想在使用 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 Foundation 内时会抛出此错误：

Uncaught TypeError: Cannot read property 'is_hover' of undefined

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

我 100% 确定这与 Foundation 在启动 Angular.js 应用程序之前启动的事实有关。我正在通过手动将 data-dropdown-init 添加到下拉输入中来临时解决此问题，但我认为这并不漂亮。

欢迎任何方向。

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

【问题讨论】：

拜托，你能在 Fiddle/Plunker 中重现它吗？

@MaximShoustin 我已在问题中添加了链接。

作为更新，我通过创建一个几乎相同的角度指令来处理这个问题。它仍然使用 Foundation 样式，但不再使用 JS。如果您需要详细信息，我可以将其添加为答案。

当然，如果您对这个答案感觉良好 - 添加它

【参考方案1】：

一个非常简单的解决方案是使用Angular-Foundation，尽管它对您如何实现事物相当固执己见。

【参考方案2】：

发生此错误是因为基础下拉功能在 Angular 应用启动之前启动。防止此错误的一种解决方法是在 Angular 应用程序启动后添加 html 属性。修改一下

data-dropdown-content

到

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

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

【讨论】：

嘿@Jassim 你有 ng-attr 的文档吗？

@Simon : 请查看 Angular docs.angularjs.org/guide/interpolation提供的文档