4

I am using md-chips directive to generate chips.However I want certain chips to be conditionally disabled , while keeping others editable. But according to documentation, either we can make all chips disabled or none.

<md-chips ng-model="FruitNames" name="fruitName" readonly="$chip.notEditable == 'true'" md-max-chips="5">
    <md-chip-template>
      <strong>{{$chip}}</strong>
      <em>(fruit)</em>
    </md-chip-template>
  </md-chips>

Is there any way to make chips conditionally editable/non-editable?

Rambler
  • 4,994
  • 2
  • 20
  • 27
Jagajit Prusty
  • 2,070
  • 2
  • 21
  • 39

1 Answers1

3

You can use md-chip-remove directive to add your own remove chip button and put disabling condition there on the chip level. See the example below:

<md-chips ng-model="FruitNames" name="fruitName" md-max-chips="5" md-on-remove="onRemovedChip($chip)">
    <button
        ng-if="!$chip.notEditable"
        class="md-chip-remove ng-scope" 
        md-chip-remove
        type="button"
        aria-hidden="true" tabindex="-1">
        <md-icon md-svg-icon="md-close"></md-icon>
        <span class="md-visually-hidden ng-binding">Remove</span>
    </button>
    <md-chip-template>
        <strong>{{$chip}}</strong>
        <em>(fruit)</em>
    </md-chip-template>
</md-chips>

In order to forbid tags removal using backspace, you should also add this method to your controller:

$scope.onRemovedChip = function(chip) {
    if (chip.notEditable) {
        $scope.FruitNames.push(chip);
    }
};
Mikhail Asavkin
  • 31
  • 3
  • yes, @JagajitPrusty, you're right, I've left some of your initial code there, my mistake. I've updated the snippet. it will allow to remove only those chips that don't have notEditable attribute set to `true`. – Mikhail Asavkin Jan 19 '17 at 22:26