如何在AngularJS的Selectize下拉框中实现清除按钮功能？

嘿，刚好我之前也遇到过一模一样的需求，官方插件确实没现成的，不过咱们可以基于现有代码用几种方式实现，给你分享下可行的方案：

方案1：通过Selectize配置自定义渲染模板 #

Selectize本身支持自定义选项和选中项的渲染逻辑，我们可以直接在你的myconfig里添加render配置，手动插入清除按钮，再绑定点击事件清空模型。

修改你的控制器里的配置对象：

$scope.myconfig = {
  // 保留你原有的其他配置
  render: {
    item: function(data, escape) {
      // 自定义选中项的模板，把清除按钮加进去
      return '<div class="selectize-selected-item">' +
        escape(data.text) +
        '<button type="button" class="selectize-clear-btn" onclick="$(this).closest(\'.selectize-control\')[0].selectize.clear();">&times;</button>' +
      '</div>';
    },
    option: function(data, escape) {
      // 保持原有的选项渲染逻辑即可
      return '<div>' + escape(data.text) + '</div>';
    }
  }
};

再补一点CSS让按钮更美观：

.selectize-selected-item {
  position: relative;
  padding-right: 28px;
}
.selectize-clear-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #777;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.selectize-clear-btn:hover {
  color: #333;
}

这个方案完全用Selectize原生API实现，不需要额外依赖，还能精准控制按钮的样式和位置。

方案2：封装AngularJS指令批量添加清除功能 #

如果项目里有很多selectize组件，不想逐个改配置，可以写个自定义指令，自动给所有目标下拉框加上清除按钮：

angular.module('你的项目模块名').directive('selectizeClearable', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      // 等Selectize初始化完成再操作
      setTimeout(function() {
        const selectizeInstance = element[0].selectize;
        // 创建清除按钮元素
        const clearBtn = angular.element('<button type="button" class="selectize-clear-btn">&times;</button>');
        // 绑定清空事件，同时同步Angular模型
        clearBtn.on('click', function() {
          selectizeInstance.clear();
          scope.$apply();
        });
        // 把按钮加到selectize容器里
        element.find('.selectize-control').append(clearBtn);
      }, 0);
    }
  };
});

然后在你的selectize标签上加上这个指令就行：

<selectize class="every" ng-disabled="ngReadonly" config="myconfig" options="myOptions" ng-model="myModel" selectize-clearable></selectize>

同样用上方案1的CSS，这样所有带selectize-clearable指令的下拉框都会自动拥有清除功能，批量处理超方便。

方案3：单独添加清除按钮（最简快速版） #

如果只是单个下拉框需要，不想改太多代码，可以直接在页面上放个独立按钮，通过Angular的点击事件调用Selectize的clear方法：

<div class="selectize-group">
  <selectize class="every" ng-disabled="ngReadonly" config="myconfig" options="myOptions" ng-model="myModel"></selectize>
  <button type="button" ng-click="clearThisSelect()" ng-show="myModel">&times;</button>
</div>

控制器里添加对应的方法：

$scope.clearThisSelect = function() {
  const selectize = document.querySelector('.every').selectize;
  selectize.clear();
};

这个方案最省事，适合快速实现单个控件的需求，通过ng-show控制按钮只在有选中值时显示。

内容的提问来源于stack exchange，提问作者Gaurav Tomer