AngularJS中ng-options如何同时使用filter与orderBy？

问题分析 #

你的代码里 orderBy 不生效的核心原因有两个：

• orderBy 参数写法错误：你使用了 orderBy: l.Name，但 AngularJS 的 orderBy 过滤器需要接收属性名字符串（比如 'Name'）或排序函数，而非直接引用循环变量的属性。
• ng-model 绑定逻辑错误：当前 ng-model="vm.values" 绑定的是整个数据数组，会导致选中逻辑混乱，应该绑定到单个选中项变量。

修正后的代码 #

<label class="control-label">My Dropdown 123</label>
<input type="search" ng-model="searchFilter.Name" class="" placeholder="Search">
<select class="form-control" 
        ng-options="l as (l.ID ? (l.ID + ' - ') : '') + l.Name + ' (' + l.ID + ')' for l in vm.values | orderBy: 'Name' | filter: searchFilter track by l.ID "
        data-ng-model="vm.selectedItem"
        ng-disabled="vm.isReadOnly">        
    <option value="">All</option>
</select>

关键修改说明 #

1. 修复 orderBy 参数：将 orderBy: l.Name 改为 orderBy: 'Name'，明确指定按 Name 属性排序；如果需要倒序排序，可写成 orderBy: '-Name'。
2. 修正 ng-model 绑定：把 ng-model="vm.values" 改为 ng-model="vm.selectedItem"，绑定到单个选中对象，确保选中逻辑正常工作。
3. 优化文本拼接（可选）：简化了选项文本的拼接逻辑，去掉多余空格，让代码更整洁，不影响原有功能。

过滤器顺序调整（按需选择） #

• 如果需要先对全部数据排序，再执行过滤，保持 orderBy 在 filter 之前即可。
• 如果需要先过滤数据，再对过滤后的结果排序，调换两者顺序为 filter: searchFilter | orderBy: 'Name'。

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