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

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的代码中看到的而言,这并未在当前的实现中公开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];
  }