如何实现多选ui-select显示选中项数量而非选中项标签

没问题！要实现这个需求，我们只需要自定义ui-select的匹配模板，同时利用组件内置的方法来添加清除功能，具体方案如下：

1. 完整代码示例 #

直接修改你的ui-select组件，替换默认的ui-select-match模板，改为显示选中数量和清除按钮：

<ui-select multiple 
           ng-model="ctrl.multipleDemo.removeSelectIsFalse" 
           theme="bootstrap" 
           ng-disabled="ctrl.disabled" 
           close-on-select="false" 
           style="width: 800px;" 
           title="Choose a person" 
           remove-selected="false">
  <!-- 自定义匹配模板：显示选中数量 + 清除按钮 -->
  <ui-select-match placeholder="请选择人员">
    <span ng-if="ctrl.multipleDemo.removeSelectIsFalse.length > 0">
      {{ctrl.multipleDemo.removeSelectIsFalse.length}}个已选
      <button type="button" class="btn btn-xs btn-default" ng-click="$select.clear()">
        清除
      </button>
    </span>
    <span ng-if="ctrl.multipleDemo.removeSelectIsFalse.length === 0">
      请选择人员
    </span>
  </ui-select-match>

  <!-- 下拉选项部分保持原有逻辑即可 -->
  <ui-select-choices repeat="person in ctrl.people | filter: $select.search">
    <div ng-bind-html="person.name | highlight: $select.search"></div>
    <small ng-bind-html="person.email | highlight: $select.search"></small>
  </ui-select-choices>
</ui-select>

2. 核心逻辑说明 #

• 动态显示选中数量：通过ctrl.multipleDemo.removeSelectIsFalse.length获取选中数组的长度，直接渲染成“X个已选”的文本。
• 清除按钮功能：使用ui-select内置的$select.clear()方法，点击后可以一键清空所有选中项，无需自己写清空逻辑。
• 状态切换提示：通过ng-if根据选中数组的长度，切换显示“已选状态”和“未选择时的占位提示”，让用户感知更清晰。

3. 可选样式优化 #

如果觉得清除按钮和文本的间距不合适，可以加一点自定义CSS调整：

.ui-select-match .btn-xs {
  margin-left: 8px;
  padding: 1px 5px;
}

这样按钮会和文本保持合适的距离，视觉上更协调。

内容的提问来源于stack exchange，提问作者Mantu Nigam