md-chips deletion by clicking the chip

Question

I'm new to angularJS. I'm using md-chips to create chips based on drop down selection. For mobile view, i would like to delete the md-chips by clicking the chip instead of making the user click the small 'X' on the chip. If i make it read-only i can't delete the chip. Any ideas appreciated. Thanks.

HTML:

            <div ng-repeat="filter in sc.filters">
               <md-chips ng-model="filter.value" ng-if="sc.isArray(filter.value)" md-on-remove="sc.filter()">
                  </md-chips>
            </div>

show your controller code – Gaurav Kumar Singh Apr 14 '17 at 12:37 — Gaurav Kumar Singh, Apr 14 '17 at 12:37

score 2 · Accepted Answer · edited Apr 14 '17 at 12:53

2

You can use md-on-select="ctrl.remove($chip)" callback where $chip contains the element of the ng-mode array which has been clicked on. In the remove function you can then remove that element from the array. According to your example that would like like as follows:

$scope.remove = function($chip) {
  var idx = self.fruitNames.indexOf($chip)
  $scope.filters.splice(idx, 1)
}

A working fiddle can be found here: jsFiddle

edited Apr 14 '17 at 12:53

Prerak Sola

9,517
7
36
67

answered Apr 14 '17 at 12:47

Stephan Köninger

304
1
4

Unfortunately this only works when `readonly` is false. I can't find a satisfying solution when `readonly` is true and `md-removable` is true. – Andrew Gee May 07 '19 at 10:45

md-chips deletion by clicking the chip

1 Answers1