CODEWITHSUNDEEP
angularjsangular-material
Carlos Galo Campos
Carlos Galo Campos

Reputation: 648

How to make md-contact-chips readonly to true

The md-chips has readonly attribute that disables list manipulation (deleting or adding list items), hiding the input and delete buttons. If no ng-model is provided, the chips will automatically be marked as readonly.

But the md-contacts-chips have no readonly attribute.

How am I able to disable the remove button for the chips?

Upvotes: 1

Views: 1839

Answers (2)

Dorota
Dorota

Reputation: 61

I use kind of workaround for this.

You can add ng-class to md-chips like that:

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

In the controller set readonly variable as You need and add style for .readonly class. In my case it is:

md-chips-wrap {
  box-shadow: none;
  cursor: default;

  button.md-chip-remove {
    display: none;
  }

  .md-chip-input-container md-autocomplete {
    display: none;
    cursor: default;
  }
}

Upvotes: 5

Ismael Altenhofen
Ismael Altenhofen

Reputation: 11

I have create a new "chips-contacts", but list my custom contacts, with readonly

<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>

Upvotes: 1

Related Questions