Material 动态设计精简菜单 ng-repeat

Question

我正在尝试在 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-repeat 一起不起作用

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

Answer 1

这是一个工作版本：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>

Material 动态设计精简菜单 ng-repeat

Material Design Lite Menu dynamically ng-repeat

javascript

jquery

angularjs

material-design-lite