Material Design Lite Menu 动态 ng-repeat答案

【问题标题】：Material Design Lite Menu dynamically ng-repeatMaterial Design Lite Menu 动态 ng-repeat
【发布时间】：2016-04-01 04:52:54
【问题描述】：

我正在尝试在 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>

【问题讨论】：

你能检查一下 dom 看看，按钮 id 的值是什么，ul 中的值是什么 -> {{product._id}}？
@AtaurRahimChowdhury 它们是从数据库中随机生成的 id，例如 56fdf88b8dca55a01b36674f
这是一个工作版本：jsfiddle.net/xjdjjjrz
@AtaurRahimChowdhury 谢谢！也许我只是在我的代码的某个地方犯了一个拼写错误。现在可以了。谢谢！请创建一个答案，以便我接受它
将此作为答案发布，如果有效，请接受。

标签： javascript jquery angularjs material-design-lite

【解决方案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>

【讨论】：