How to sort by several fields with Ionic and / or AngularJS of a JSON?

Question

How to sort by several fields with Ionic and / or AngularJS of a JSON?

Navigation

#1 by (1 votes)

2

I'm trying to sort fields dynamically by Ionic and AngularJs. I started by using the Modal Select plugin 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 like this:

// 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 into view 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}}">

Sort up, 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 is penny, he does not order right. What is curious, since the "discount" field that has the same format as the values fields it sorts well.

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

I have tried to put | currency on "role" but it does not accept. So I want to do this sort of order differently, but I do not know how and I did not find anything on the Internet. It would have to be a modal to filter these fields. My JSON can be accessed here .

How can I create a sort order with several fields and types using "Modal" and this my JSON . You do not necessarily need to use this plugin mentioned at the beginning of this question.

Thank you in advance.

javascript angularjs json ionic angularjs-services

asked by anonymous 07.04.2017 / 14:51

1 answer

Search in the bank from option [closed] How to calculate 2 ^ n and (2 ^ n) +1 in java?

score 1 · Accepted Answer

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

As for the problem itself, I do not know how you are using more than one field, but the correct one is to make the declaration through an array, for example:

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

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

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

So, by unifying the two solutions I just passed, ideally I would sort the list using the $filter filter, within its controller (or service ), I recommend that you use code like this:

/ p>

// 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 I've noticed now, so that you can sort correctly with values (whether monetary or just numeric), it's important that the field be int , otherwise it will not have consistency in results, which may be your case, since your JSON is returning the discount field as string .

That's the general idea, so I think you'll have the knowledge to adapt your code to use the proposed solution. If you still have questions, leave a comment I will try to help!