AngularJS 非 ascii 属性名支持答案

【问题标题】：AngularJS non-ascii property name supportAngularJS 非 ascii 属性名支持
【发布时间】：2015-05-16 08:25:03
【问题描述】：

我不知道如何在 AngularJS 中使用非 ascii 属性名称。我可以使用a['property_name'] 而不是a.property_name 来打印一个值，但我不能在'orderBy' 中使用相同的方式。如果单击“名称”，则会进行排序，但如果单击“가격_price”，则不会发生任何事情，并且控制台中会显示错误。如何对具有非 ascii 名称的表进行排序？

（代码中有韩文字符，但我觉得有道理。）

http://jsfiddle.net/k9h32mh9/

<div ng-app>
    <div ng-controller="ListCtrl">
        <table>
            <tr>
                <th><a ng-click="predicate='name'; reverse=false">name</a></th>
                <th><a ng-click="predicate='가격_price'; reverse=false">가격(price)</a></th>
            </tr>
            <tr ng-repeat="item in items | orderBy:predicate:reverse">
                <td>{{item.name}}</td>
                <td>{{item['가격_price']}}</td>
            </tr>
        </table>
    </div>
</div>
<script>
function ListCtrl($scope, $http) {
    $scope.predicate = '-name';
    $scope.items = [{name: "a", 가격_price:"1000"},
                    {name: "b", 가격_price:"2000"},
                    {name: "c", 가격_price:"1500"}];
}
</script>

【问题讨论】：

为什么你的属性名需要英韩混合？作为一个人，我可以告诉你：它看起来很丑......为什么你认为你的属性名称中必须有这些符号？我的母语与英语相去甚远，但我从来没有对所有东西的英文名称有任何问题
该对象不是我制作的，因此除非我找到解决此问题的方法，否则我将不得不手动更改属性名称，并且我正在将英语与韩语混合，因为我担心可能没有韩文字体的人。
目前不可能（此处正在进行讨论：github.com/angular/angular.js/issues/2174）。现在，听起来您唯一的选择是在检索数据时对其进行预处理，以便您的密钥位于 Angular 接受的字符中。（当然，除非您想构建自己的内置指令版本——不过我不建议这样做。）

标签： angularjs utf-8 non-ascii-characters

【解决方案1】：

虽然这是 Angular 的一个问题，但根据 https://github.com/angular/angular.js/issues/2174，可以通过在范围上指定您自己的谓词函数以访问要排序的属性来解决它：

$scope.predicateProperty = 'name';
$scope.predicate = function(a) {
    return a[$scope.predicateProperty];
};

HTML 可以几乎相同，只需将 predicateProperty 设置为您要排序的属性名称（我还删除了对“reverse”的引用，因为它会使问题稍微复杂化）

<table>
    <tr>
        <th><a ng-click="predicateProperty='name';">name</a></th>
        <th><a ng-click="predicateProperty='가격_price';">가격(price)</a></th>
    </tr>
    <tr ng-repeat="item in items | orderBy:predicate">
        <td>{{item.name}}</td>
        <td>{{item['가격_price']}}</td>
    </tr>
</table>

你可以在http://jsfiddle.net/k9h32mh9/5/看到这个工作

【讨论】：