AngularJS non-ascii property name support

Question

I don't know how to use non-ascii property name in AngularJS. I could print a value by using a['property_name'] instead of a.property_name, but I couldn't use the same way in 'orderBy'. If I click on 'name', sorting would happen, but if I click on '가격_price', nothing would happen and an error would show up in the console. How could I sort a table which has non-ascii name?

(There are Korean Characters in the code, but I think it makes sense.)

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>

Why do you need your attribute names in a mixed English-Korean? Just as a human being I can tell you: it looks so ugly... And why do you believe you must have these symbols in your properties names at all? My native language is far away from English but I never had any problem with English names for everything — smnbbrv, May 16 '15 at 08:58
The object wasn't made by me, so I would have to manually change the property names unless I find a solution to this problem, and I'm mixing English with Korean because I'm worried about people who may not have Korean fonts. — margincall, May 16 '15 at 09:25
Not currently possible (on-going discussion here: https://github.com/angular/angular.js/issues/2174 ). For now, it sounds like your only option is to preprocess the data when you retrieve it, so that your keys are in the Angular-accepted characters. (Unless, of course, you want to build your own versions of the built in directives -- I do not suggest that route, though.) — DRobinson, May 21 '15 at 12:53

score 3 · Accepted Answer · answered May 23 '15 at 12:52

While this is an issue with Angular, as per https://github.com/angular/angular.js/issues/2174, it can be worked around by specifying your own predicate function on the scope in order to access the property to sort by:

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

And the HTML can be almost identical, just setting predicateProperty to the property name that you want to sort by (I've also removed references to "reverse" as it slightly complicates the issue)

<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>

You can see this working at http://jsfiddle.net/k9h32mh9/5/

AngularJS non-ascii property name support

1 Answers1