Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 708
Staeff Avatar asked Jun 24 '15 11:06

Staeff


People also ask

What is matChipInputFor?

MatChipInput. Directive that adds chip-specific behaviors to an input element inside <mat-form-field> . May be placed inside or outside of an <mat-chip-list> . Selector: input[matChipInputFor]

What is chip list?

A chip-list behaves as a role="listbox" , with each chip being a role="option" . The chip input should have a placeholder or be given a meaningful label via aria-label or aria-labelledby .

How do I disable mat-chip-list?

If you want to disable MatChipList just write [disabled]="true" in mat-chip-list tag. But user can not remove chips anymore. If you want to disable input field just write [disabled]="true" in input tag.


3 Answers

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);
}
like image 87
vishnu Avatar answered Oct 20 '22 18:10

vishnu


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.

like image 28
Parziphal Avatar answered Oct 20 '22 18:10

Parziphal


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];
  }
like image 31
tomtastico Avatar answered Oct 20 '22 17:10

tomtastico