javascript 如何获得角料芯片的选定芯片？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31024923/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the selected chip of angular-material chips?
提问by Staeff
You can select the md-chipelements in md-chipsby clicking on them, but I haven't found a good method to find out which one got selected in the controller.
您可以通过单击来选择其中的md-chip元素md-chips，但我还没有找到一种很好的方法来找出在控制器中选择了哪个元素。
Has anyone accomplished this?
有没有人做到这一点？
<md-chips ng-model="ctrl.roFruitNames">
<md-chip-template>
<strong>{{$chip}}</strong>
<em>(fruit)</em>
</md-chip-template>
</md-chips>
采纳答案by tomtastico
Unfortunately as far as I can see in Angular Material's code, this is not exposed in the current implementation of md-chip.
不幸的是，就我在 Angular Material 的代码中所见，这在md-chip.
You can get around it by accessing the directive's controller directly, but it's quite dirty, and will easily break with future versions of md-chip.
您可以通过直接访问指令的控制器来绕过它，但它非常脏，并且很容易与md-chip.
<md-chips ng-model="ctrl.roFruitNames" ng-click="ctrl.getSelectedChip($event)">
In the controller:
在控制器中：
self.getSelectedChipIndex = function(event) {
var selectedChip = angular.element(event.currentTarget).controller('mdChips').selectedChip;
alert(selectedChip);
}
See it working:
看看它的工作：
http://codepen.io/anon/pen/oXopQq
http://codepen.io/anon/pen/oXopQq
There is already an issue in Angular Material requesting something like this, so hopefully it will be added in the future:
Angular Material 中已经有一个问题要求这样的东西，所以希望将来会添加它：
https://github.com/angular/material/issues/3413
https://github.com/angular/material/issues/3413
[Edit]
[编辑]
to fetch chip data:
获取芯片数据：
var ctrl = angular.element(event.currentTarget).controller('mdChips');
if(ctrl !== undefined){
var selectedChip = ctrl.items[ctrl.selectedChip];
}
回答by vishnu
Use md-on-select :An expression which will be called when a chip is selected.
使用md-on-select ：选择芯片时将调用的表达式。
<md-chips md-on-select="getChipInfo($chip)" md-on-remove="removeChip($chip)"> ... </md-chip>
In your controller
在您的控制器中
$scope.getChipInfo= function(chip_info) {
console.log(chip_info);
}
回答by Parziphal
Have you tried md-chips' md-on-select? In the Codepen you shared you're using Angular Material v0.10, with which md-on-selectdoesn't work, but if you change it to v0.11.4, it does work:
你试过 md-chips'md-on-select吗？在您共享的 Codepen 中，您使用的是 Angular Material v0.10，它md-on-select不起作用，但如果您将其更改为 v0.11.4，它确实起作用：
<md-chips md-on-select="ctrl.select($chip)">
In controller:
在控制器中：
self.select = function(chip) {
// You got the chip!
}
Here's a forked version of your Codepen: http://codepen.io/anon/pen/vLmKQR
这是您的 Codepen 的分叉版本：http://codepen.io/anon/pen/vLmKQR
MD Chips' API: https://material.angularjs.org/latest/api/directive/mdChips
MD Chips 的 API：https: //material.angularjs.org/latest/api/directive/mdChips
Just a side note, if md-on-adddoesn't work, use md-on-appendinstead, although it will be removed on official v1.0 release.
只是一个旁注，如果md-on-add不起作用，请md-on-append改用，尽管它将在官方 v1.0 版本中删除。
回答by Joao Leal
You can call a function in your scope with ng-click:
您可以使用以下命令调用范围内的函数ng-click：
<md-chip-template ng-click="ctrl.doSomething($chip)" >
回答by Roman K
It should be md-on-add
它应该是 md-on-add
<md-chips md-on-add="ctrl.select($chip)">
or
或者
<md-chips md-on-add="yourmodel=ctrl.chipModel">
