Угловой материал: чтобы определенные фишки отключили условно в md-чипах?

Question

Я использую директиву md-chips для создания фишек. Однако я хочу, чтобы некоторые фишки были условно отключены, сохраняя при этом другие редактируемые. Но согласно документации, мы можем отключить все чипы или нет.

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

Есть ли способ сделать чипы условно редактируемыми/нередактируемыми?

Answer 1

Вы можете использовать директиву md-chip-remove, чтобы добавить свою собственную кнопку очистки микросхемы и установить условия отключения на уровне чипа. Смотрите пример ниже:

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

Для того, чтобы запретить удаление тегов с помощью забой, вы должны также добавить этот метод к контроллеру:

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