[SOLVED] md-chips deletion by clicking the chip

md-chips deletion by clicking the chip

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>

Solution

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