Malzeme Tasarımı Lite Menüsü dinamik olarak yineleniyor

MDL'deki menü özelliklerine ulaşmaya çalışıyorum. Aşağıdaki kodda gösterildiği gibi iyi çalışıyor. o ng-tekrarlama kimlikli düğmeye kimliğini tekrar edecektir olarakMalzeme Tasarımı Lite Menüsü dinamik olarak yineleniyor

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

Ben açısal en ng tekrarı kullanarak yukarıdaki kodu uygulamak. Tekrar edildikten sonra menü açılır. Ben neyi özlüyorum? Aşağıdaki kod İşte

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

kaynak

2016-04-01 Gene Lim

Eğer dom incelemek ve görebilir miyiz için düğmeye id değeri ve ne ul'deki değer -> {{product._id}}? –

@AtaurRahimChowdhury, 56fdf88b8dca55a01b36674f –

gibi veritabanından rastgele oluşturulmuş bir kimliktir. İşte bir çalışma sürümü: http://jsfiddle.net/xjdjjjrz/ –

çalışmak bir çalışma versiyonudur gelmez ng tekrarı ile geçerli: 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>

kaynak

2016-04-01 05:48:46

Works teşekkür ederim –

Malzeme Tasarımı Lite Menüsü dinamik olarak yineleniyor

cevap

İlgili konular