Material Design Lite菜单动态重复

Material Design Lite Menu dynamically ng-repeat

本文关键字：动态 菜单 Design Lite Material      更新时间：2023-10-16

我正在尝试实现MDL中的菜单功能。它在静态情况下运行良好，如下代码所示。

<button id="demo-menu-lower-left"
    class="mdl-button mdl-js-button mdl-button--icon">
    <i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-left">
   <li class="mdl-menu__item">Some Action</li>
   <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
   <li disabled class="mdl-menu__item">Disabled Action</li>
   <li class="mdl-menu__item">Yet Another Action</li>
</ul>

我使用Angular的ng repeat实现上面的代码，因为它将用ng repeat的ID重复按钮的ID。重复之后，菜单将无法下拉。我在这里错过了什么？下面的代码是用ng重复的，它不工作

<div ng-repeat="product in vm.products">
<button id="{{product._id}}"
    class="mdl-button mdl-js-button mdl-button--icon">
    <i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
for="{{product._id}}">
   <li class="mdl-menu__item">Some Action</li>
   <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
   <li disabled class="mdl-menu__item">Disabled Action</li>
   <li class="mdl-menu__item">Yet Another Action</li>
</ul>
</div>

这是一个工作版本：http://jsfiddle.net/xjdjjjrz

<div ng-repeat="product in vm.products">
  <button id="{{product._id}}-{{$index}}"
      class="mdl-button mdl-js-button mdl-button--icon">
      <i class="material-icons">more_vert</i>
  </button>
  <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
  for="{{product._id}}-{{$index}}">
     <li class="mdl-menu__item">Some Action</li>
     <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
     <li disabled class="mdl-menu__item">Disabled Action</li>
     <li class="mdl-menu__item">Yet Another Action</li>
  </ul>
</div>
相关文章：