如何获得角料芯片的选定芯片？答案

【问题标题】：How to get the selected chip of angular-material chips?如何获得角料芯片的选定芯片？
【发布时间】：2015-06-24 11:07:36
【问题描述】：

您可以通过单击来选择md-chips 中的md-chip 元素，但是我还没有找到一个好的方法来找出在控制器中选择了哪个元素。

有人做到了吗？

<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

【问题讨论】：

标签： javascript angularjs angular-material

【解决方案1】：

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

【讨论】：

这是正确的答案，我已经测试过了，效果很好。但是，我确实觉得有必要添加一些信息。使用 md-transform-chip="vm.transformChip($chip)" 捕捉您输入并从下拉列表中选择的文本“转换”为芯片的时刻。对我来说，这比 md-on-select 更有用
如果您有 readonly="true" 将其设置为 false，这样效果很好。谢谢！

【解决方案2】：

不幸的是，据我在 Angular Material 的代码中看到的，这在 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

Angular Material 中已经存在请求这样的问题，因此希望将来会添加它：

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

[编辑]

获取芯片数据：

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

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

【讨论】：

问题出在我身上哈哈，但无论如何谢谢你的解决方案现在就可以了！
真的问问自己材料设计团队是如何规划控制的。不能以现实生活为基础。

【解决方案3】：

你试过md-chips'md-on-select吗？在您分享的 Codepen 中，您使用的是 Angular Material 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 版本中被删除。

【讨论】：

【解决方案4】：

您可以使用ng-click 调用您范围内的函数：

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

【讨论】：

不幸的是，这仅在有限的方式下起作用，因为您必须单击文本部分才能触发“事件”并且芯片没有被选中。

【解决方案5】：

应该是 md-on-add

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

或

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

【讨论】：