AngularJS ng-repeat自定义排序失效问题求助

我看了你的代码，发现两个关键问题导致排序没按预期工作，咱们一步步来修复：

1. HTML中的语法错误 #

你在ng-repeat指令里的orderBy参数后面多了个多余的空格和引号：

<div ng-repeat="p in persons | orderBy:sortPersons ">

这个小失误会让AngularJS无法正确识别你的排序函数，直接导致排序逻辑完全失效。

2. 排序函数的默认返回值缺失 #

你的sortPersons函数只处理了三种眼睛颜色，但如果后续数据出现其他颜色，函数会返回undefined，这可能引发不可预期的排序行为。

修正后的完整代码 #

控制器代码

$scope.persons = [ 
  {'name': "Pete", 'eyes': 'green', 'hair': 'blonde', 'part': 1}, 
  {'name': "Dave", 'eyes': 'blue', 'hair': 'red', 'part': 2}, 
  {'name': "Derek", 'eyes': 'blue', 'hair': 'blonde', 'part': 2}, 
  {'name': "Jake", 'eyes': 'brown', 'hair': 'black', 'part': 3}, 
  {'name': "Jeff", 'eyes': 'brown', 'hair': 'darkbrown', 'part': 4}
]; 

$scope.sortPersons = function(item){ 
  switch(item.eyes){ 
    case 'green': return 2; 
    case 'blue': return 3; 
    case 'brown': return 1; 
    default: return 0; // 兜底处理未知眼睛颜色的情况
  } 
};

HTML代码

<div ng-repeat="p in persons | orderBy:sortPersons"> 
  <p>name: {{p.name}}, eyes: {{p.eyes}}, hair: {{p.hair}}, part: {{p.part}}</p> 
</div>

为什么这样能生效？ #

• 修复HTML语法错误后，AngularJS可以正确调用你的sortPersons函数执行排序逻辑。
• 你的排序规则本身是正确的：brown返回1（升序时优先级最高，排在最前），green返回2，blue返回3，最终会严格按照brown → green → blue的顺序排列。
• 添加默认返回值后，即使出现未知的眼睛颜色，也不会打乱整体排序的稳定性。

测试修正后的代码，你会看到符合预期的排序结果：

Jake (brown) → Jeff (brown) → Pete (green) → Dave (blue) → Derek (blue)

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