Question

我有一个列，其中title是文件大小，数据是字符串格式，就像＆＃34; 1.2 Mb，2.4 Kb，241字节......＆＃34;

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

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

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

我相信我们必须对Mb，Kb或Bytes ....等字符串进行检查。

Answer 1

如果您的行上有小数数据，则可以使用简单的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

Answer 2

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

＆＃13;

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;
  };
}]);

＆＃13;

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

＆＃13;

至少是这个想法，但似乎指令没有使用比较器。将角度文档中的代码复制到JsFiddle似乎也无法正常工作。有人知道这个功能是否被删除了？

<强>已更新

修正了代码，找出了错误：需要角度1.5.7并在比较器中返回1或-1而不是true / false

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

2 个答案: