ng-repeat 中使用字典语法的 Orderby 不起作用

在 AngularJS 的 ng-repeat 指令中，可以通过指定 Orderby 参数来对数组进行排序。但是一些开发者在使用字典语法时遇到了问题：Orderby 不起作用。

问题描述

通常我们使用 ng-repeat 来循环数组，并对其进行排序：

<div ng-repeat="item in items | orderBy:'propertyName'">
  {{item}}
</div>

这里的 propertyName 是要排序的属性名。

然而，当我们尝试使用字典语法时，例如：

<div ng-repeat="item in items | orderBy:'myDict[\'propertyName\']'">
  {{item}}
</div>

可能会发现，排序并没有按照 myDict 中的 propertyName 进行排序。

问题原因

问题出现的原因是，ng-repeat 内部会将字符串参数解析为函数表达式，然而字典语法实际上是一个字符串，因此无法被正确解析。

解决方法

方法一：使用函数表达式

为了解决这个问题，我们可以使用函数表达式代替字典语法，如下所示：

<div ng-repeat="item in items | orderBy: getProperty('propertyName')">
  {{item}}
</div>

其中 getProperty 函数的定义如下：

$scope.getProperty = function(propertyName) {
  return function(item) {
    return item.myDict[propertyName];
  }
}

该函数返回了一个闭包，用于获取对象中指定属性的值。

方法二：使用管道

另一种方法是使用管道（|）操作符，将字典语法转换为函数表达式：

<div ng-repeat="item in items | orderBy: 'myDict[\'propertyName\']' | eval">
  {{item}}
</div>

这里使用了 AngularJS 中的 eval 过滤器，以便将字符串参数解析为函数表达式。

总结

在 AngularJS 的 ng-repeat 指令中，如果要使用字典语法来进行排序，请使用上述两种方法之一。同时需要注意，getProperty 函数或 eval 过滤器中的属性名必须使用原始的 JavaScript 字符串转义方式。

希望本文能够对遇到类似问题的开发者有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26017