[angularjs]材料设计建兴菜单动态ng-repeat

发布时间: 2017/4/16 4:59:35
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我试图实现中 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>

我执行上面的代码使用角的 ng-repeat 因为它会重复按钮的 ID 的 id 为 ng-repeat 。后重复,菜单不能够向下拉。在这里我错过了什么?下面的代码是与 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>

解决方法 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>
赞助商