我正在使用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>
有什么方法可以使芯片有条件地可编辑/不可编辑?
您可以使用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>
为了禁止使用BackSpace删除标签,您还应将此方法添加到控制器:
$scope.onRemovedChip = function(chip) {
if (chip.notEditable) {
$scope.FruitNames.push(chip);
}
};