CODEWITHSUNDEEP
javascriptangularjsiteratorangularjs-directive
Nick Brown
Nick Brown

Reputation: 1167

Getting months to display in order in through Angular Directive

jsFiddle

I'm trying to build a table using Angular's ng-repeat directive that displays two years of data: 

--------------------------------------------------------
January  |  jan text this year   |  jan text last year  
February |  feb text this year   |  feb text last year  
March    |  march text this year |  march text last year
--------------------------------------------------------

What I end up with is:

--------------------------------------------------------
January  |  feb text this year   |  feb text last year  
February |  jan text this year   |  jan text last year  
March    |  march text this year |  march text last year
--------------------------------------------------------

I have an object with two years of data.

$scope.data = {
    thisYear: {
        January: 'jan text this year',
        February: 'feb text this year',
        March: 'march text this year'
        // etc..
    },
    lastYear: {
        January: 'jan text last year',
        February: 'feb text last year',
        March: 'march text last year'
        // etc..
    }
};

As well as a simple array: $scope.months = ['January', 'February', 'March'];

The months are easy, and work fine:

<div ng-repeat="month in months">{{ month }}</div>

The data, though, doesn't work as intended:

<div ng-repeat="d in data.thisYear">{{ d || "none" }}</div>

The data is iterated in alphabetical order, meaning the month's data doesn't line up. Since Angular data binding does not allow the use of primitive types, I can't solve it with multidimensional arrays.

I feel like I'm overlooking something stupid and small, I know I could get this done easily outside of Angular, but I'm trying to work within their system. Perhaps a custom directive?

Upvotes: 0

Views: 575

Answers (2)

charlietfl
charlietfl

Reputation: 171669

You can do each column by looping months

<div ng-repeat="month in months">{{ data.lastYear[month] || "none" }}</div>

DEMO

Personally I would restructure data into something like

[{year: 2013, months:[{month: 'val', text:'val'},{month: 'val', text:'val'}....]},{ year: 2012:.....}]

Your comment about not being able to do this with arrays is off track. Objects don't have order, whereas arrays do

Upvotes: 1

net.uk.sweet
net.uk.sweet

Reputation: 12431

Couldn't you just change your data structure so you're iterating over a single array which contains all the information you need? Something like this:

$scope.data = [
    { month: 'January', thisYear: 'jan text this year', lastYear: 'jan text last year' },
    { month: 'February', thisYear: 'feb text this year', lastYear: 'feb text last year' },
    { month: 'March', thisYear: 'mar text this year', lastYear: 'mar text last year' },
    // etc..
];

Upvotes: 0

Related Questions