AngularJS自定义文件大小排序过滤器

Question

我有一列，其中标题是文件大小，数据是字符串格式，例如“1.2 Mb, 2.4 Kb, 241 Bytes...”

我已经使用 orderBy 对其进行了角度排序，但它无法正常工作。 它只是改变了上帝知道什么逻辑的价值观。

我想到的一个解决方案是将字符串转换为一些整数/浮点数，然后根据这些整数/浮点数对列进行排序。

知道如何实现这一目标吗？就像我如何将这些文件大小转换为一些整数并对其应用排序？我将在函数中编写什么代码？

我相信我们必须对字符串进行 Mb、Kb 或字节等检查。

Answer 1

我会在 orderBy 指令中使用自定义比较器。见文档angular orderBy

angular.module('orderByExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.files = [
    {name: 'File1', size: '1.2 Mb'},
    {name: 'File2', size: '2.4 Kb'},
    {name: 'File3', size: '241 Bytes'},
    {name: 'File4', size: '2.0 Mb'},
    {name: 'File5', size: '16.1 Kb'}
  ];

  $scope.fileSizeComparator = function(s1, s2) {
    // split the size string in nummeric and alphabetic parts
    var s1Splitted = s1.value.split(" ");
    var s2Splitted = s2.value.split(" ");
    if (s1Splitted[1] === s2Splitted[1]) {
      // if size type is the same, compare the number
      return parseFloat(s1Splitted[0]) > parseFloat(s2Splitted[0]) ? -1 : 1;
    }
    // default : compare on size type Mb > Kb > Bytes
    return s1Splitted[1] > s2Splitted[1] ? -1 : 1;
  };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="orderByExample">
  <div ng-controller="ExampleController">
    <table>
      <tr>
        <th>Name</th>
        <th>Size</th>
      </tr>
      <tr ng-repeat="file in files | orderBy:'size':false:fileSizeComparator">
        <td>{{file.name}}</td>
        <td>{{file.size}}</td>
      </tr>
    </table>
  </div>
</div>

至少是这个想法，但该指令似乎没有使用比较器。将代码从 Angular 文档复制到 JsFiddle 似乎也不起作用。有人知道这个功能是否被贬低了吗？

更新

修复代码，找出问题所在：需要 angular 1.5.7 并在比较器中返回 1 或 -1 而不是 true/false

Answer 2

如果你的行中有十进制数据，你可以使用简单的 orderBy

我为你创建了示例，

        var controllers = {};
        var app = angular.module('UM',[]);

        //routing
        app.config(function($routeProvider){
            $routeProvider
            .when('/',{
                template: '<a href="#" class="btn">home</a><input ng-model="sorter" /><table  class="table table-striped">    <thead>        <th >            <a href="" ng-click="sortList(\'id\')">ID</a>        </th>        <th>            <a href="" ng-click="sortList(\'firstname\')">First Name</a>        </th>        <th>            <a href="" ng-click="sortList(\'lastname\')">Surname</a>        </th>        <th>            <a href="" ng-click="sortList(\'age\')">Age</a>        </th>        <th>           <a href="" ng-click="sortList(\'cars\')">cars</a>        </th>    </thead>    <tbody>        <tr ng-repeat="person in people | orderBy:sorter ">            <td>{{person.id | number}}</td>            <td>{{person.firstname}} </td>            <td>{{person.lastname}} </td>            <td>{{person.age | number}}</td>            <td>{{person.cars}} </td>        </tr>    </tbody></table>',
                controller: 'listCtrl'
            }).when('/test',{
                template: '<h6>{{people}}</h6>',
                controller: 'listCtrl'
            });
        });

        //user data
        app.service('People', function() {
            var People = {};
            People.details = [{"id":"42","firstname":"Sarah","lastname":"Dilby","age":"33.1","cars":"Yaris"},
                              {"firstname":"Jason","lastname":"Diry","age":"32.1","id":"5"},
                              {"id":"6","firstname":"Bilson","lastname":"Berby","age":"33.3","cars":"Tipo"}]
            return People;
        });

        //list ctrl
        controllers.listCtrl = function ($scope,People) {
            $scope.people = People.details;
            $scope.sortList = function(sortname) {
                $scope.sorter = sortname;
            }
        }

        //controllers
        app.controller(controllers);

查看Fiddle