Angular Material: bestimmte Chips in MD-Chips bedingt deaktivieren?

Question

Ich benutze md-chips-Direktive, um Chips zu generieren.Wie auch immer ich will, dass bestimmte Chips bedingt deaktiviert werden, während andere bearbeitbar bleiben. Aber gemäß der Dokumentation können wir entweder alle Chips deaktiviert oder keine machen.

<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> 

Gibt es eine Möglichkeit, Chips bedingt editierbar/nicht editierbar zu machen?

Answer 1

Sie können die md-chip-remove Direktive verwenden, um Ihren eigenen Chip-Remove-Button hinzuzufügen und ihn dort auf dem Chip-Level zu deaktivieren. Siehe nachstehendes Beispiel:

<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>

Um Tags Entfernung mit Backspace zu verbieten, sollten Sie auch diese Methode, um Ihren Controller hinzuzufügen:

$scope.onRemovedChip = function(chip) { 
 
    if (chip.notEditable) { 
 
     $scope.FruitNames.push(chip); 
 
    } 
 
};