将原生select替换为ui-select实现ngRepeat过滤的问题

当然可行！你遇到的首次操作ui-select无响应的问题，大概率是组件绑定初始化或者配置细节没处理好，调整后完全可以用ui-select替代原生select实现过滤功能，不用依赖原生控件。

问题根源分析 #

你之前的问题很可能是因为没有提前初始化过滤对象theFilter，或者ui-select的ng-model绑定逻辑不规范。原生select在选择值时会自动隐式创建theFilter对象，但ui-select对ngModel的绑定要求更严格，如果初始时theFilter是undefined，首次选择就可能无法触发数据更新。另外，也要确保正确引入了ui-select的依赖模块。

完整实现步骤 #

1. 确保引入ui-select依赖

首先在你的Angular模块中声明依赖ui.select：

angular.module('yourAppName', ['ui.select']);

如果使用Bootstrap主题，记得引入对应的ui-select样式文件（这是组件正常显示的必要条件）。

2. 控制器中初始化过滤对象

在控制器里提前初始化theFilter，避免首次绑定undefined：

angular.module('yourAppName').controller('YourController', function($scope) {
  // 提前初始化过滤对象，保证ui-select能正确绑定
  $scope.theFilter = {
    choice: '',
    otherChoice: ''
  };

  // 你的业务数据示例
  $scope.options = [
    { showMe: 'Yes', amIDeleted: 'No' },
    { showMe: 'No', amIDeleted: 'Yes' },
    { showMe: 'Yes', amIDeleted: 'Yes' },
    { showMe: 'No', amIDeleted: 'No' }
  ];
});

3. 替换原生select为ui-select组件

用ui-select替换原来的原生select，注意正确配置ng-model、选项列表和显示逻辑：

<!-- 第一个过滤选择器 -->
<ui-select ng-model="theFilter.choice" theme="bootstrap" class="form-control">
  <ui-select-match placeholder="Any">{{ $select.selected || 'Any' }}</ui-select-match>
  <ui-select-choices repeat="opt in ['', 'Yes', 'No']">
    <div ng-bind="opt || 'Any'"></div>
  </ui-select-choices>
</ui-select>

<!-- 第二个过滤选择器 -->
<ui-select ng-model="theFilter.otherChoice" theme="bootstrap" class="form-control">
  <ui-select-match placeholder="Any">{{ $select.selected || 'Any' }}</ui-select-match>
  <ui-select-choices repeat="opt in ['', 'Yes', 'No']">
    <div ng-bind="opt || 'Any'"></div>
  </ui-select-choices>
</ui-select>

<!-- 原有的ng-repeat过滤部分保持不变 -->
<div class="col-xs-12" ng-repeat="item in options | filter: { showMe: theFilter.choice, amIDeleted: theFilter.otherChoice }">
  <p>{{ item.showMe }}</p>
  <p>{{ item.amIDeleted }}</p>
</div>

为什么这样能解决问题？ #

• 提前初始化theFilter对象，让ui-select的ngModel绑定有明确的目标，避免首次选择时因对象不存在导致的绑定失效。
• 规范的ui-select配置（包括ui-select-match和ui-select-choices）确保组件能正确渲染选项并同步选中值到theFilter中，进而触发ngRepeat的过滤逻辑。

这样调整后，你不需要依赖任何原生select，首次操作ui-select就能正常触发过滤效果了。

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