CODEWITHSUNDEEP
angularjsjsondateionic-frameworksql-order-by
Lernas
Lernas

Reputation: 61

Order by Date AngularJS (Ionic

I'm trying to show an accordion list ordered by date. This date is in JSON format, which is not friendly to the user. However, if I format it the way I want to, I can no longer use it to order the list.

.controller('WarningsCtrl', function ($scope, HttpService) {
    HttpService.getWarnings()
    .then(function (res) {
        for (var i = 0; i < res.length; i++){
            //converts json date (2017-01-25T16:10:45) in simple date (25-01-2017)
            //inicioArray = res[i].inicio.split("-");
            //inicioArray[2] = inicioArray[2].substring(0, inicioArray[2].indexOf("T"));
            //res[i].inicio = inicioArray[2] + "-" + inicioArray[1] + "-" + inicioArray[0];
        }
        $scope.warnings = res;
    }, function (err) {
        console.log("Error. " + err);
    });
    console.log("Warnings: " + $scope.warnings);
})
<ion-item-accordion class="item item-text-wrap" title="{{warning.titulo}}" date="{{warning.inicio}}" icon-align="right" icon-close="ion-chevron-right" icon-open="ion-chevron-down" style="font-size:10px!important; color:red;" ng-repeat="warning in warnings | orderBy:'-inicio'" >
    <div style="text-align:center" ng-if="warning.imagem != null"><img ng-src="http://www.predio24.com/{{warning.imagem}}" style="width:100%; height:auto" /></div><br />
    <div ng-bind-html="warning.corpo | unsafe"></div>
</ion-item-accordion>

If I uncomment the JSON date conversion, the orderby will not work, because the order of numbers is not good for ordering. How can I keep the formated date, while ordering using the original date?

Upvotes: 0

Views: 678

Answers (2)

Lernas
Lernas

Reputation: 61

I have not explored angularJS filters too much, so the solution to this problem was simpler than I thought.

I left the controller without any relevant code

.controller('WarningsCtrl', function ($scope, HttpService) {
    HttpService.getWarnings()
    .then(function (res) {
        $scope.warnings = res;
    }, function (err) {
        console.log("Error. " + err);
    });
    console.log("Warnings: " + $scope.warnings);
})

And used a filter in my view:

date="{{warning.inicio | date: 'dd/MM/yyyy' }}"

So:

<ion-item-accordion class="item item-text-wrap" title="{{warning.titulo}}" date="{{warning.inicio | date: 'dd/MM/yyyy' }}" icon-align="right" icon-close="ion-chevron-right" icon-open="ion-chevron-down" style="font-size:10px!important; color:red;" ng-repeat="warning in warnings | orderBy:'-inicio'">

Upvotes: 0

SylonZero
SylonZero

Reputation: 1207

Have you tried using an Angular filter for the formatting of the date when supplying it to the Accordion directive? Your commented code above would probably be a filter function like below (assuming I've interpreted your function right):

.filter('formatDate', function() {
    return function(rawDate) {
        //converts json date (2017-01-25T16:10:45) in simple date (25-01-2017)
        inicioArray = rawDate.split("-");
        inicioArray[2] = inicioArray[2].substring(0, inicioArray[2].indexOf("T"));
        return inicioArray[2] + "-" + inicioArray[1] + "-" + inicioArray[0];
    }
});

Then in your accordion markup, date will be interpolated as:

date="{{warning.inicio | formatDate}}"

This should leave the date alone for other operations (like the orderBy) while supplying a formatted version to the directive for display...

Upvotes: 1

Related Questions