Seçilen açısal-malzeme çipleri nasıl elde edilir?

Question

öğelerini md-chips numaralı telefondan seçerek tıklayabilirsiniz, ancak denetleyicide hangisinin hangi tuşa basıldığını bulmak için iyi bir yöntem bulamadım.

Bunu kim yaptı?

<md-chips ng-model="ctrl.roFruitNames"> 
    <md-chip-template> 
    <strong>{{$chip}}</strong> 
    <em>(fruit)</em> 
    </md-chip-template> 
</md-chips> 

http://codepen.io/anon/pen/QbOaLz

Answer 1

Maalesef bildiğim kadarıyla Açısal Malzeme kodunda, bu geçerli uygulama açığa çıkmadığı gördüğünüz gibi md-chip.

Doğrudan yönerge denetleyicisine erişerek, bunun etrafından dolaşabilirsiniz, ancak oldukça kirlidir ve md-chip'un gelecek sürümleriyle kolayca kırılabilir. denetleyici olarak

<md-chips ng-model="ctrl.roFruitNames" ng-click="ctrl.getSelectedChip($event)"> 

:

self.getSelectedChipIndex = function(event) {  
    var selectedChip = angular.element(event.currentTarget).controller('mdChips').selectedChip; 
    alert(selectedChip); 
} 

çalışmıyor bakınız:

http://codepen.io/anon/pen/oXopQq

zaten böyle bir şey talep eden Eğik Malzeme bir sorun vardır, yani Umarım eklenecektir Gelecekte:

https://github.com/angular/material/issues/3413

---

[Düzenle]

çip veri getirmek için:

var ctrl = angular.element(event.currentTarget).controller('mdChips'); 

    if(ctrl !== undefined){ 
    var selectedChip = ctrl.items[ctrl.selectedChip]; 
    } 

Answer 2

Sen ng-click ile kapsam içinde işlevini çağırabilirsiniz:

<md-chip-template ng-click="ctrl.doSomething($chip)" > 

Answer 3

denedin md-cips md-on-select? Codepen size öyle, sen v0.11.4 olarak değiştirin eğer md-on-select çalışmaz hangi Açısal Malzeme v0.10 kullanılarak, fakat konum paylaştı iş: denetleyici olarak

<md-chips md-on-select="ctrl.select($chip)"> 

:

http://codepen.io/anon/pen/vLmKQR

MD Chips' API: https://material.angularjs.org/latest/api/directive/mdChips

Sadece bir yan not,varsa burada

self.select = function(chip) { 
    // You got the chip! 
} 

senin Codepen bir çatallı versiyonuçalışmıyor, bunun yerine resmi v1.0 sürümünde kaldırılmasına rağmen md-on-append kullanın.

Answer 4

Kullanım md-on-select: Bir çip seçildiğinde çağrılacak bir ifade.Kumandanızda olarak

<md-chips md-on-select="getChipInfo($chip)" md-on-remove="removeChip($chip)"> ... </md-chip> 

$scope.getChipInfo= function(chip_info) { 
console.log(chip_info); 
} 

Answer 5

O md-add-on edilmelidir sınırlı bir şekilde

<md-chips md-on-add="ctrl.select($chip)"> 

veya

<md-chips md-on-add="yourmodel=ctrl.chipModel">