md-chips具有 readonly 属性,可禁用列表操作(删除或添加列表项),隐藏输入和删除按钮。如果没有提供ng型号,芯片将自动标记为只读。
但md-contacts-chips没有只读属性。
如何禁用芯片的删除按钮?
答案 0 :(得分:3)
我使用了一种解决方法。
将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;
}
}
答案 1 :(得分:1)
我创建了一个新的“筹码 - 联系人”,但列出我的自定义联系人,只读
<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>