Question

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

有没有人完成这个？

<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

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

Answer 2

不幸的是，就我在Angular Material的代码中看到的情况而言，这在ff:ff:ff:ff:ff的当前实现中没有公开。

你可以通过直接访问指令的控制器来解决这个问题，但它很脏，并且很容易打破md-chip的未来版本。

md-chip

在控制器中：

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

看到它正常工作：

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

Angular Material已经有一个问题需要这样的东西，所以希望它将来会被添加：

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

[编辑]

获取芯片数据：

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

Answer 3

你有没有尝试过md-chips＆＃39; 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 Chips＆＃39; API：https://material.angularjs.org/latest/api/directive/mdChips

只是附注，如果md-on-add不起作用，请改用md-on-append，尽管它会在官方v1.0版本中删除。

Answer 4

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

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

Answer 5

应该是md-on-add

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

或

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

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

5 个答案: