How to sort across multiple fields with Ionic and/or Angularjs from a JSON?

Question

I’m trying to sort fields dynamically by Ionic and Angularjs. I started using the plugin Modal Select, with the button like this:

<button class="button button-stable button-block icon-left ion-android-restaurant" modal-select="" ng-model="someModel" options="selectableNames" option-property="role" modal-title="Ordenar por..." header-footer-class="bar-assertive">Ordenar
    <div class="option">
        <h2>{{option.name}}</h2>
    </div>
</button>

And the controller thus:

// ORDENA POR...
$scope.selectableNames = [
    {
        name: "Por preço: Do Menor para o Maior",
        role: "+cadastra_oferta_valor_com_desconto"
    },
    {
        name: "Por preço: Do Maior para o Menor",
        role: "-cadastra_oferta_valor_com_desconto"
    },
    {
        name: "Por Maior Desconto (%)",
        role: "-cadastra_oferta_desconto"
    },
    {
        name: "Menor Prazo de Entrega",
        role: "+fornecedor_configura_frete_prazo_entrega_min"
    },
    {
        name: "Oferta em Ordem Alfabética",
        role: "+cadastra_oferta_titulo_promocao"
    },
    //...
];

Putting my filter in view in this way:

<div class="card" ng-repeat="item in ofertass | filter:q | orderBy:someModel | unique: 'cadastra_oferta_cod_oferta'" ng-init="$last ? fireEvent() : null" href="#/nhaac/ofertas_singles/{{item.cadastra_oferta_cod_oferta}}">

It orders up well, but the price fields that are:

{
    name: "Por preço: Do Menor para o Maior",
    role: "+cadastra_oferta_valor_com_desconto"
},
{
    name: "Por preço: Do Maior para o Menor",
    role: "-cadastra_oferta_valor_com_desconto"
},
// ...

How much has penny, it does not order right. What is curious, because the field "discount" that has the same format as the values fields it orders well.

{
    name: "Por Maior Desconto (%)",
    role: "-cadastra_oferta_desconto"
},

I’ve tried to put | currency in the "role" but does not accept. So I want to do this ordering differently, but I do not know how and I found nothing on the Internet. It would have to be a modal to filter these fields. Mine JSON can be accessed here.

How can I create a sort with several fields and types using "Modal" and this mine JSON. Not necessarily needing to use this plugin mentioned at the beginning of this issue.

Thanks in advance.

Answer 1

With Angular, first of all, I recommend that you DO NOT use sorting (or any other type of filter) through the filter, especially within a ngRepeat, the impact on performance is really great when working with extensive lists.

As for the problem itself, I don’t know how you are using more than one field, but the correct thing is to make the statement through an array, for example:

orderBy: ['nome', '-idade', 'ativo']

// No seu exemplo
ng-repeat="item in ofertass | orderBy:['cadastra_oferta_desconto', 'currency']

Note: For statement in ascending order, there is no need to use +, only the name of the field.

So, unifying the two solutions I just passed, the ideal would be to sort the list using the filter $filter, within your controller (or service), recommend you use code in this style:

// HTML
<select ng-model="campoOrdena" ng-change="ordenarLista()">
    <option value="nome">Nome</option>
    <option value="-valor">Valor</option>
</select>

<div class="card" ng-repeat="item in ofertas">

// AngularJs
$scope.ofertas = [...]; //Sua array com os objetos a serem ordenados

$scope.ordenarLista = function() {
    // Explicando: $filter('orderBy')( "lista a ser ordenada", "campos para ordenar");
    // Ex.: $filter('orderBy')( $scope.ofertas, ['nome', 'valor', '-idade']);

    $scope.ofertas = $filter('orderBy')($scope.ofertas, $campoOrdena); // Lista com a nova ordem
}

Another point that I’ve noticed now, so you can sort correctly with values (be they monetary or only numerical), it is important that the field is of the type int, otherwise it will not have consistency in the results, which may be your case, since your JSON is returning the discount field as string.

This is the general idea, with this I think you will have the knowledge to adapt your code to use the proposed solution. If you still have questions, leave a comment that I will try to help!