angularjs - md-chips 通过点击芯片删除

Question

我是 angularJS 的新手。我正在使用 md-chips 根据下拉选择创建芯片。对于移动视图，我想通过单击芯片来删除 md-chips，而不是让用户单击芯片上的小“X”。如果我将其设为只读，则无法删除该芯片。任何想法表示赞赏。谢谢。

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>

Answer 1

您可以使用md-on-select="ctrl.remove($chip)"回调，其中$chip包含已单击的 ng-mode 数组的元素。然后，在 remove 函数中，您可以从数组中删除该元素。根据您的示例，如下所示：

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

可以在这里找到一个工作小提琴：jsFiddle