Angular Material: 如何有条件地禁用 md-chips 中的某些 chips？

Question

我正在使用md-chips指令生成芯片（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>

有没有一种方法可以有条件地使芯片可编辑/不可编辑？

- Jagajit Prusty

---

什么是问题？ - Scott Hunter

看起来无法按芯片进行个别设置。 - camden_kid

@ScottHunter 我想根据条件禁用一些芯片。 - Jagajit Prusty

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);
    }
};

- Mikhail Asavkin

---

是的，@JagajitPrusty，你说得对，我把你的一些初始代码留在那里了，我的错误。我已经更新了片段。它将允许仅删除那些没有设置为“true”的notEditable属性的芯片。 - Mikhail Asavkin