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 Design Lite菜单动态ng-repeat

1 个答案: