Custom Сортировать по Строка длина

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(). сортировки() может принимать необязательные функции compareFunction, который может обрабатывать сортировка элементов:

Если compareFunction поставляется, элементы массива сортируются в соответствии со значением возврата функции сравнения. Если а и б два элемента сравнивают, то:

• Если compareFunction(a, b) меньше 0, сортировать а к более низким индексом, чем Ь, то есть в первом месте.
• Если compareFunction(a, b) возвращает 0, оставьте a и b без изменений относительно друг друга, но отсортированы по всем различным элементам. Примечание. Стандарт ECMAscript не гарантирует такого поведения, и, таким образом, не все браузеры (например, версии Mozilla, датированные как минимум 2003 годом).
• Если compareFunction(a, b) больше 0, сортируйте b до более низкого индекса, чем a.
• compareFunction(a, b) должен всегда возвращать одно и то же значение при задании определенной пары элементов a и b в качестве двух аргументов. Если возвращаются несогласованные результаты, порядок сортировки не определен. ¹

Для сравнения этикетки свойства каждого элемента, который является строкой, используйте parseInt() разобрать целое число из строки при сравнении элементов, как в приведенной ниже коде. Уведомление передается как аргумент radix (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

Хороший вариант заключается в использовании

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, вы можете использовать OrderBy с фильтром ng repeat,

Код:

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

Если вы хотите сделать это в контроллер, вы можете использовать $ фильтр,

Код

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

DEMO

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. Угловой обеспечивает вам лучший контроль над этими данными, которые будут эффективными и очень простыми в реализации.

Вы можете использовать фильтры от угловых 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>