gpt4 book ai didi

angularjs - Angular Material : make certain chips disable conditionally in md-chips?

转载 作者:行者123 更新时间:2023-12-02 22:44:03 34 4
gpt4 key购买 nike

我正在使用 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>

为了禁止使用退格键删除标签,您还应该将此方法添加到您的 Controller 中:

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

关于angularjs - Angular Material : make certain chips disable conditionally in md-chips?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37942653/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com