Угловой порядокПо номеру сортировка как текст в ng-repeat

Я думаю, что наиболее подходящим решением является правильное форматирование чисел, которые у меня есть в моих объектах JSON, то есть не заключать их в кавычки. Так:

 [{"id":"42","firstname":"Sarah","lastname":"Dilby","age":"40","cars":"Yaris"},
  {"firstname":"Jason","lastname":"Diry","age":"5","id":"5"},
  {"id":"6","firstname":"Bilson","lastname":"Berby","age":"1","cars":"Tipo"}]

становится:

[{"id":42,"firstname":"Sarah","lastname":"Dilby","age":40,"cars":"Yaris"},
 {"firstname":"Jason","lastname":"Diry","age":5,"id":5},
 {"id":6,"firstname":"Bilson","lastname":"Berby","age":1,"cars":"Tipo"}]

Я предполагаю, что решение SergL хорошо, если невозможно исправить формат данных JSON.

Чтобы добавить к этому, проблема в моем конкретном случае связана с функцией PHP json_encode на стороне сервера. По умолчанию он обрабатывает числа как строки. Чтобы исправить это, мне пришлось добавить параметр JSON_NUMERIC_CHECK к методу encode в PHP-скрипте:

json_encode($assoc_array,JSON_NUMERIC_CHECK);

Вам не нужно изменять свой JSON. Вы можете передать функцию фильтру orderBy следующим образом:

$scope.sorterFunc = function(person){
    return parseInt(person.id);
};

<tr ng-repeat="person in people | orderBy:sorterFunc ">
        <td>{{person.id | number}}</td>
        <td>{{person.firstname}} </td>
        <td>{{person.lastname}} </td>
        <td>{{person.age | number}}</td>
        <td>{{person.cars}} </td>
 </tr>

Внутри вашей директивы ng-repeat вы используете числовой фильтр

<td>{{person.id | number}}</td>

Фильтры используются для форматирования вывода, но они не обновляют свойства модели. Например: person.id = 1234,56789 будет отображаться как 1 234,568.

Как упоминалось выше, вы должны преобразовать возраст в тип числа. Тогда orderBy будет работать как надо. Например, внутри вашего сервиса:

angular.forEach(People.details, function (detail) {
  detail.age = parseFloat(detail.age);
});

если ваше значение orderBy является не переменной, указывающей на другую строку, а скорее атрибутом, по которому вы будете сортировать, вы должны поместить его в кавычки.

person in people | orderBy:'-id'

Если после того, как вы проанализировали свой int или float и все еще не сортируете правильно, это может быть из-за этого. ‹:/ (это моя дурацкая кепка)

Я столкнулся с той же проблемой, когда работал с текстовым полем и ngModel, чтобы изменить значение модели, по которой я заказывал. Поскольку значение рассматривалось как строка.

С новым HTML5 <input type="number" /> Angular анализирует значение поля ввода к числу (я думаю, с плавающей запятой), которое помогло мне получить правильный порядок.

Пусть orderBy указывает на метод, принадлежащий области или его неизолированным предкам, и пусть этот метод возвращает число, полученное из строки. Возможно, вам придется написать директиву, наследующую область person, созданную экземплярами ngRepeat..., чтобы добавить этот метод.

Более того, в вашем случае возраст представляет собой строку, в которой он мог бы быть целым числом, поэтому числовая сортировка будет применяться изначально.

Если вы не можете изменить сервер данных, измените его на стороне клиента во время выборки.

Лучше всего обновлять повторяющуюся коллекцию всякий раз, когда вызывается функция сортировки. Здесь я использую Lodash - orderBy просто для упорядочения коллекции на основе функции сортировщика. Допустим, сортировка вызывается при нажатии на заголовок столбца таблицы.

Пример:

Объект коллекции:

ctrl.people = [{"id":"42","firstname":"Sarah","lastname":"Dilby","age":"40","cars":"Yaris","salary": 700}, {"firstname":"Jason","lastname":"Diry","age":"5","id":"5","cars":"Lexia","salary": 500},{"id":"6","firstname":"Bilson","lastname":"Berby","age":"1","cars":"Tipo","salary": 400}];

Пользователь щелкает заголовок столбца для сортировки по возрасту:

<th class="col-age" data-ng-click="ctrl.sortColumn('age')">Age</th>

Метод называется:

ctrl.sortColumn('age'); // where age is column containing numbers only

Реализация метода:

ctrl.sortedCol = 'firstname';    //Default sort column

ctrl.sortColumn = (column) => {
    ctrl.sortedCol = column; //age
    let order = 'asc'; //you can decide the order based on your own logic
    ctrl.people = _.orderBy(ctrl.people, [ctrl.sorter], [order]);   //update the collection
};

ctrl.sortColumn(ctrl.sortedCol); //called on initial rendering

Функция сортировщика: возвращает отсортированную коллекцию на основе типа столбца.

ctrl.sorter = (item) => {
    const columnType = ctrl.getColumnType();
    if(item[ctrl.sortedCol] && columnType === 'string'){
        return item[ctrl.sortedCol].toLowerCase();
    } else if(item[ctrl.sortedCol] && columnType === 'number'){
        return parseInt(item[ctrl.sortedCol]);
    } else{
        return item[ctrl.sortedCol];
    }    
};

Определите тип столбца: может быть строка, число или даже дата.

ctrl.getColumnType = () => {
    if(ctrl.sortedCol === 'firstname' || ctrl.sortedCol === 'lastname' || ctrl.sortedCol === 'cars'){
        return 'string';
    } else if(ctrl.sortedCol === 'salary' || ctrl.sortedCol === 'age'){
        return 'number';
    }
};