问题:

angular 1.4.x 版本开始,<div ng-repeat="(key, value) in myObj"> ... </div> 的方法移除了按照首字母排序的规则,改为使用浏览器默认的方法,也就是for key in myObj

因此当我们使用 angular-filter 的 groupBy 方法将数组分组时,分组后的数组不会再按照 key 排序,某些情况下就会造成一些麻烦。

解决方案:

根据 这一条说明,利用 toArray 和 orderBy 可以解决这一个问题。

toArray 方法可以将对象转换成固定的数组。这个方法接受一个 bool 类型的参数,用来指定是否将对象的 key 作为转换后数组中的元素的一个属性输出,如果设为 true,那么数组元素将会多一个属性 $key 代表原来的对象的 key。 所以我们可以这样完成 groupBy 方法的排序:

<ul ng-repeat="group in myObj | groupBy: 'groupKey' | toArray: true | orderBy: '$key'">
  <li ng-bind="$key"></li>
  <li ng-repeat="item in group"></li>
</ul>

这样,groupBy 的结果就会按照对应的参数的首字母(这里是groupKey)排序了。