2015-06-24 72 views

回答

6

不幸的是,据我可以看到角材质的代码,这是不是在目前的实现暴露md-chip

您可以通过直接访问指令的控制器来避开它,但它很脏,并且很容易与md-chip的未来版本冲突。

<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); 
} 

看到它的工作:

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

已经有一个在角材料要求是这样的一个问题,所以希望它会被添加未来:

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


[编辑]

获取芯片的数据:

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

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

这个问题是从我哈哈,但非常感谢你的解决方案现在要做! – Staeff

+0

真正问自己,材料设计团队是如何计划控制的。不能在真实的生活基础上。 – Pascal

0

你可以调用一个函数在你的范围与ng-click

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

可惜,这只是作品,因为你有t o点击文本部分触发“事件”,芯片不会被选中。 – Staeff

1

您是否尝试过MD-芯片md-on-select?在Codepen您共享您正在使用角材料v0.10,与md-on-select不工作,但如果你将其更改为v0.11.4,它的工作:

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

在控制器:

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

这是你Codepen的分支版本:http://codepen.io/anon/pen/vLmKQR

MD芯片的API:https://material.angularjs.org/latest/api/directive/mdChips

只是一个侧面说明,如果md-on-add不起作用,请使用md-on-append代替,但它会在官方v1.0发行版中删除。

10

使用md-on-select:当选择芯片时将被调用的表达式。

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

在你的控制器

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

这是正确的答案,我已经测试过,并且效果很好。但是,我确实需要添加一些信息。使用md-transform-chip =“vm.transformChip($ chip)”来捕获您输入并从下拉列表中选择的文本“转换”为芯片的时刻。对我而言,这比md-on-select更有用 – aholtry

+1

如果你有'readonly =“true”'将它设置为false,这个效果很好。谢谢! – jaggedsoft

0

应该MD-上添加以有限的方式

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

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