如何获取选中的angular-material个筹码？

Question

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

有人做到了吗？

<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

您可以使用 ng-click:

在您的范围内调用一个函数

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

Answer 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];
  }

Answer 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 版本中删除。

Answer 4

使用md-on-select : 芯片被select编辑时调用的表达式。

 <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

应该是md-on-add

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

或

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

如何获取选中的angular-material个筹码？

How to get the selected chip of angular-material chips?

javascript

angularjs

angular-material