Question

我正在尝试对此数据进行排序。

我的数据如下：

var test =   [
            {label: '41_45', 
            value :14},
            {label: '46_50', 
            value :34},
            {label: '1', 
             value :44},
            {label: '10_15', 
            value :84}
            {label: '3', 
            value :44},
            {label: '6_10', 
            value :94},
            {label: '16_20', 
            value :74},
            {label: '21_25', 
            value :64},
            {label: '26_30', 
            value :44},
            {label: '31_35',
            {label: '4', 
            value :44},
            {label: '5', 
            value :24},
            {label: '36_40', 
            value :444},
            {label: '>50', 
            value :24},
            {label: '2', 
            value :44}
        ];

但我想根据标签对其进行排序，以便我可以得到这样的结果：

  var test =   [
            {label: '1', 
            value :44},
            {label: '2', 
            value :44},
            {label: '3', 
            value :44},
            {label: '4', 
            value :44},
            {label: '5', 
            value :24},
            {label: '6_10', 
            value :94},
            {label: '11_15', 
            value :84},
            {label: '16_20', 
            value :74},
            {label: '21_25', 
            value :64},
            {label: '26_30', 
            value :44},
            {label: '31_35', 
            value :4},
            {label: '36_40', 
            value :444},
            {label: '41_45', 
            value :14},
            {label: '46_50', 
            value :34},
            {label: '>50', 
            value :24}
        ];

我可以利用任何库或功能来实现这一目标吗？

Answer 1

虽然这可以使用角度过滤器（正如其他人提到的那样）完成，但也可以在视图逻辑之前使用JavaScript函数array.sort()完成。 sort（）可以接受可以处理项目排序的可选函数 compareFunction ：

如果提供了 compareFunction ，则根据compare函数的返回值对数组元素进行排序。如果a和b是要比较的两个元素，那么：


如果compareFunction(a, b)小于0，则将a排序为低于b的索引，即a先出现。

如果compareFunction(a, b)返回0，则保持a和b相对于彼此保持不变，但是对所有不同的元素进行排序。注意：ECMAscript标准不保证这种行为，因此并非所有浏览器（例如可追溯到至少2003年的Mozilla版本）都尊重这一点。

如果compareFunction(a, b)大于0，则将b排序为低于。
的索引   当给定一对特定元素a和b作为其两个参数时，
compareFunction(a, b)必须始终返回相同的值。如果返回不一致的结果，则排序顺序未定义。   ¹

要比较每个项目的标签属性（字符串），请在比较项目时使用parseInt()来解析字符串中的整数，如下面的代码所示。注意 10 作为基数（2 ^nd参数）传递，以确保没有字符串被错误地解析为十六进制/八进制数。

var newArray = test.sort(function(item1, item2) {
    if (parseInt(item1.label,10) < parseInt(item2.label,10)) {
         return -1; //put item2 after item1
    } 
    return 1; //otherwise put item1 after item2
});

请参阅下面的演示（点击运行代码段以查看结果）。使用ternary operator简化了条件逻辑。

var test =
    [{
      label: '41_45',
      value: 14
    }, {
      label: '46_50',
      value: 34
    }, {
      label: '1',
      value: 44
    }, {
      label: '10_15',
      value: 84
    }, {
      label: '3',
      value: 44
    }, {
      label: '6_10',
      value: 94
    }, {
      label: '16_20',
      value: 74
    }, {
      label: '21_25',
      value: 64
    }, {
      label: '26_30',
      value: 44
    }, {
      label: '31_35'
    }, {
      label: '4}',
      value: 44
    }, {
      label: '5',
      value: 24
    }, {
      label: '36_40',
      value: 444
    }, {
      label: '>50',
      value: 24
    }, {
      label: '2',
      value: 44
    }];
var newArray = test.sort(function(item1, item2) {
  return (parseInt(item1.label,10) < parseInt(item2.label,10))?-1:1;
  });
console.log(newArray);

¹ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Answer 2

一个好的选择是使用loadash sortby

var users = [
  { 'user': 'fred',   'age': 48 },
  { 'user': 'barney', 'age': 36 },
  { 'user': 'fred',   'age': 40 },
  { 'user': 'barney', 'age': 34 }
];

_.sortBy(users, [function(o) { return o.user; }]);
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]

_.sortBy(users, ['user', 'age']);
// => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]]

Answer 3

如果您想使用 angular 在视图中执行此操作，可以使用带有 ng repeat 过滤器的orderby，

<强>代码：

 <div ng-repeat="item in test | orderBy:'label' ">
    <h1>{{item}}</h1>
  </div>

如果您想在控制器中执行此操作，可以使用$ filter，

<强>代码

$scope.filtered =  $filter('orderBy')($scope.test, 'label');

<强>样本

var app = angular.module('app', []);
app.controller('loginController', ['$scope','$filter', function($scope,$filter) {
  $scope.test =
    [{
      label: '41_45',
      value: 14
    }, {
      label: '46_50',
      value: 34
    }, {
      label: '1',
      value: 44
    }, {
      label: '10_15',
      value: 84
    }, {
      label: '3',
      value: 44
    }, {
      label: '6_10',
      value: 94
    }, {
      label: '16_20',
      value: 74
    }, {
      label: '21_25',
      value: 64
    }, {
      label: '26_30',
      value: 44
    }, {
      label: '31_35'
    }, {
      label: '4}',
      value: 44
    }, {
      label: '5',
      value: 24
    }, {
      label: '36_40',
      value: 444
    }, {
      label: '>50',
      value: 24
    }, {
      label: '2',
      value: 44
    }];
   $scope.filtered =  $filter('orderBy')($scope.test, 'label');
}]);

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
</head>

<body ng-app="app" ng-controller="loginController">
  <div ng-repeat="item in filtered">
    <h1>{{item}}</h1>
  </div>
  <script type=" text/javascript " src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js "></script>
  <script type="text/javascript " src="MainViewController.js "></script>
</body>
</html>

Answer 4

@Sajeetharan已经建议了可行的解决方案。 Angular可以更好地控制这些数据，这些数据既高效又易于实现。

您可以使用角度js中的过滤器来及时获得输出。

 <table>
       <tr>
          <td>label</td>
          <td>value</td>
       </tr>
       <div ng-repeat="data in test | orderBy:'label' ">
          <tr>
             <td>data.label</td>
             <td>data.value</td>
          </tr>
       </div>
  <table>

自定义基于字符串长度排序

4 个答案: