Угловой фильтр js 'order by' не работает для одного символа

Я использую порядок angularjs по фильтру для сортировки JSON. В соответствии с порядком предпочтения, нижний регистр следует за верхним регистром, но он не работает для одного символа. Может ли кто-нибудь помочь в этом узнать?

$scope.friends = [
      {name: 'A'},
      {name: 'a'},
      {name: 'B'},
      {name: 'b'},
      {name: 'C'},
      {name: 'c'}
    ];
<table class="friends">
    <tr>
      <th>Name</th>
    </tr>
    <tr ng-repeat="friend in friends | orderBy:'name'">
      <td>{{friend.name}}</td>
    </tr>
  </table>

Результат:

Name
====
A
a
B
b
C
c
Источник

2 ответа

Решение

Попробуйте это решение только для отдельных символов:

angular.module('app', []).controller('MyController', ['$scope', function($scope) {
     $scope.friends = [
      {name: 'A'},
      {name: 'a'},
      {name: 'B'},
      {name: 'b'},
      {name: 'C'},
      {name: 'c'}
    ];
}]).filter('customOrderBy', function(){
  return function(input, name)
  {
    var result = []
    for(var item of input)
    {
      var prop = item[name];
      var toUpper = prop.toUpperCase().charCodeAt(0);      
      result.push({item, code: toUpper + (prop.toLowerCase() == prop ? 0 : 1)});      
    }
    return result.sort(function(a, b){return a.code > b.code ? 1 : (a.code == b.code ? 0 : -1);}).map(function(x) { return x.item; });         
  }
})
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="MyController">
<table class="friends">
    <tr>
      <th>Name</th>
    </tr>
    <tr ng-repeat="friend in friends | customOrderBy: 'name'">
      <td>{{friend.name}}</td>
    </tr>
  </table>
</div>
</body>

Источник

Вы можете попробовать этот пользовательский фильтр, как показано ниже?

<body ng-app="MyApp">
   <div ng-controller="MyCtrl">
       <table class="friends">
          <tr>
             <th>Name</th>
          </tr>
         <tr ng-repeat="friend in friends | localeOrderBy:'name'">
            <td>{{friend.name}}</td>
         </tr>
       </table>
   </div>
</body>


app.filter("localeOrderBy", [function () {
    return function (array, sortPredicate, reverseOrder) {
        if (!Array.isArray(array)) return array;
        if (!sortPredicate) return array;

        var isString = function (value) {
            return (typeof value === "string");
        };

        var isNumber = function (value) {
            return (typeof value === "number");
        };

        var isBoolean = function (value) {
            return (typeof value === "boolean");
        };

        var arrayCopy = [];
        angular.forEach(array, function (item) {
            arrayCopy.push(item);
        });

        arrayCopy.sort(function (a, b) {
            var valueA = a[sortPredicate];
            var valueB = b[sortPredicate];

            if (isString(valueA))
                return !reverseOrder ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);

            if (isNumber(valueA) || isBoolean(valueA))
                return !reverseOrder ? valueA - valueB : valueB - valueA;

            return 0;
        });

        return arrayCopy;
    }
}]);
Источник
Другие вопросы по тегам