AngularJS non-binding username support
I don't know how to use the non-ascii property name in AngularJS. I can print the value using a['property_name']
instead a.property_name
, but I couldn't use the same path in 'orderBy'. If I press "name" it will sort, but if I press "가격 _price" nothing happens and an error will appear in the console. How can I sort the table with a non-ascii name?
(There are Korean characters in the code, but I think it makes sense.)
<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>
source to share
While this is an Angular issue, as per https://github.com/angular/angular.js/issues/2174 it can be worked around by specifying your own scoped predicate function to access the property for sorting by:
$scope.predicateProperty = 'name';
$scope.predicate = function(a) {
return a[$scope.predicateProperty];
};
And the HTML can be almost identical just by setting predicateProperty
to the name of the property you want to sort (I also removed the references to "reverse" as it complicates the problem a bit)
<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 is working at http://jsfiddle.net/k9h32mh9/5/
source to share