Prerak Sola

Remove md-chip on click

by Prerak Sola

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<div ng-controller="BasicDemoCtrl as ctrl" layout="column" ng-cloak>
  <md-content class="md-padding" layout="column">
    <h2 class="md-title">Use the default chip template.</h2>
    <md-chips ng-model="ctrl.fruitNames" readonly="ctrl.readonly" md-removable="ctrl.removable" md-on-select="ctrl.clicked($chip)"></md-chips>
  </md-content>
</div>

CSS

.chipsdemoBasicUsage .errors {
  font-size: 12px;
  color: #dd2c00;
  margin-top: 10px;
}

.chipsdemoBasicUsage .custom-chips md-chip {
  position: relative;
}

.chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container {
  position: absolute;
  right: 4px;
  top: 4px;
  margin-right: 0;
  height: 24px;
}

.chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container button.vegetablechip {
  position: relative;
  height: 24px;
  width: 24px;
  line-height: 30px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  transition: background 0.15s linear;
  display: block;
}

.chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container button.vegetablechip md-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0) scale(0.7);
  color: white;
  fill: white;
}

.chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container button.vegetablechip:hover,
.chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container button.vegetablechip:focus {
  background: rgba(255, 0, 0, 0.8);
}

.chipsdemoBasicUsage .custom-chips md-chips-wrap.md-removable md-chip md-chip-template {
  padding-right: 5px;
}

JavaScript

(function() {
  'use strict';
  angular
    .module('chipsDemo', ['ngMaterial', 'ngMessages'])
    .controller('BasicDemoCtrl', DemoCtrl);

  function DemoCtrl($timeout, $q) {
    var self = this;

    self.readonly = false;

    // Lists of fruit names and Vegetable objects
    self.fruitNames = ['Apple', 'Banana', 'Orange'];

    self.clicked = function(chipDetails) {
      console.log("Selected: " + chipDetails);
      var index = self.fruitNames.indexOf(chipDetails)
      if (index > -1) {
        self.fruitNames.splice(index, 1);
      }
    };
  }
})();