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

Question

You can select the md-chip elements in md-chips by clicking on them, but I haven't found a good method to find out which one got selected in the controller.

Has anyone accomplished this?

<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

Solution 1

Unfortunately as far as I can see in Angular Material's code, this is not exposed in the current implementation of 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-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

There is already an issue in Angular Material requesting something like this, so hopefully it will be added in the future:

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

Solution 2

Use md-on-select : An expression which will be called when a chip is selected.

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

Solution 3

Have you tried md-chips' md-on-select? In the Codepen you shared you're using Angular Material v0.10, with which md-on-select doesn't work, but if you change it to v0.11.4, it does work:

<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

MD Chips' API: https://material.angularjs.org/latest/api/directive/mdChips

Just a side note, if md-on-add doesn't work, use md-on-append instead, although it will be removed on official v1.0 release.

Comments

[Staeff]

Unfortunately this only works in a limited way, because you have to click on the text part to trigger the "event" and the chip does not get selected.

[Staeff]

The issue is acutally from me haha, but thanks anyways your solution will do for now!

[Pascal]

Really ask myself how the material design team is planning controls. Can`t be on a real life base.

[aholtry]

This is the correct answer, I have tested it and it works great. However, I do feel the need to add a bit of information. Use md-transform-chip="vm.transformChip($chip)" to capture the moment when the text you type and select from the dropdown is "transformed" into a chip. To me, this is more useful than md-on-select

[jaggedsoft]

If you have readonly="true" set it to false and this works great. Thanks!