如何使md接触芯片只读为true

Question

md芯片具有禁用列表操作(删除或添加列表项(、隐藏输入和删除按钮的readonly属性。如果没有提供ng型号，芯片将自动标记为只读。

但是md contacts芯片没有只读属性。

如何禁用芯片的移除按钮？

Answer 1

我对此使用了某种变通方法。

您可以将ng-class添加到md-chips，如下所示：

<md-contact-chips ng-class="{'readonly': ctrl.readonly}"

在控制器中，根据需要设置readonly变量，并为.readonly类添加样式。在我的情况下是：

md-chips-wrap {
  box-shadow: none;
  cursor: default;
  button.md-chip-remove {
    display: none;
  }
  .md-chip-input-container md-autocomplete {
    display: none;
    cursor: default;
  }
}

Answer 2

我创建了一个新的"芯片联系人"，但使用只读列出了我的自定义联系人

<md-chips ng-model="asyncContacts" class="md-contact-chips" md-removable="false" readonly="true">
<md-chip-template>
    <div class="md-contact-avatar">
        <img ng-src="{{$chip.image}}" class="list-product-chip-image" alt="{{$chip.name}}" />
    </div>
    <div class="md-contact-name">
        [{{$index}}] {{$chip.name}}
        ({{$chip.amount}})
    </div>
</md-chip-template>
</md-chips>