angular-material-npfixed/src/components/chips/demoBasicUsage/index.html

The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M

<div ng-controller="BasicDemoCtrl as ctrl" layout="column" ng-cloak>

  <md-content class="md-padding" layout="column">
    <h2 class="md-title">Use a custom chip template.</h2>

    <form name="fruitForm">
      <md-chips ng-model="ctrl.roFruitNames" name="fruitName" readonly="ctrl.readonly"
                md-removable="ctrl.removable" md-max-chips="5" placeholder="Enter a fruit...">
        <md-chip-template>
          <strong>{{$chip}}</strong>
          <em>(fruit)</em>
        </md-chip-template>
      </md-chips>

      <div class="errors" ng-messages="fruitForm.fruitName.$error">
        <div ng-message="md-max-chips">Maximum number of chips reached.</div>
      </div>
    </form>

    <br/>
    <h2 class="md-title">Use the default chip template.</h2>

    <md-chips ng-model="ctrl.fruitNames" readonly="ctrl.readonly" md-removable="ctrl.removable"></md-chips>


    <br/>
    <h2 class="md-title">Make chips editable.</h2>

    <md-chips ng-model="ctrl.editableFruitNames" readonly="ctrl.readonly" md-removable="ctrl.removable"
              md-enable-chip-edit="true"></md-chips>

    <br/>

    <h2 class="md-title">Use Placeholders and override hint texts.</h2>

    <md-chips
        ng-model="ctrl.tags"
        readonly="ctrl.readonly"
        md-removable="ctrl.removable"
        placeholder="Enter a tag"
        delete-button-label="Remove Tag"
        delete-hint="Press delete to remove tag"
        secondary-placeholder="+Tag"></md-chips>

    <br/>
    <h2 class="md-title">Display an ordered set of objects as chips (with custom template).</h2>
    <p>Note: the variables <code>$chip</code> and <code>$index</code> are available in custom chip templates.</p>

    <md-chips class="custom-chips" ng-model="ctrl.vegObjs" readonly="ctrl.readonly"
        md-transform-chip="ctrl.newVeg($chip)" md-removable="ctrl.removable">
      <md-chip-template>
        <span>
          <strong>[{{$index}}] {{$chip.name}}</strong>
          <em>({{$chip.type}})</em>
        </span>
      </md-chip-template>
      <button md-chip-remove class="md-primary vegetablechip">
        <md-icon md-svg-icon="md-close"></md-icon>
      </button>
    </md-chips>

    <br/>
    <md-checkbox ng-model="ctrl.readonly">Readonly</md-checkbox>
    <md-checkbox ng-model="ctrl.removable">
      Removable (<code>{{ctrl.removable === undefined ? 'undefined' : ctrl.removable}}</code>)
    </md-checkbox>
    <p class="md-caption">
      <b>Note</b>: When md-removable is undefined, readonly automatically sets md-removable to false.
    </p>
  </md-content>
</div>