Creating a DIV wrapper using loops and an ng class in AngularJS

Question

I am currently working on creating a dynamic timeline using AngularJS. The data from my timeline is extracted from a JSON file that I have already been able to successfully configure. Here is what I have now in PLNKR: http://plnkr.co/edit/avRkVJNJMs4Ig5mDrwJ8

This is my current navigation:

<nav id="sticky-navigation"> <ul> <li><a href="#decade-1960s">1960</a></li> <li><a href="#decade-1970s">1970</a></li> <li><a href="#decade-1980s">1980</a></li> <li><a href="#decade-1990s">1990</a></li> <li><a href="#decade-2000s">2000</a></li> <li class="active"><a href="#decade-2010s">2010-Now</a></li> </ul> </nav> 

Basically, I want to create wrapper delimiters for the unique identifier of the decade of the 1960s, decade of the 1970s, etc., so that the user can use navigation to effectively navigate to the decade that they are most interested in. The date is parsed from a JSON file, so I wonder if there is another one to get a year from JSON, organize events according to specific decades, and then add a wrapper for every decade.

Many thanks! I know it sounds very complicated! But I am more a supporter of the developer and designer, not many programmers.

Answer 1

Here is a general idea :

This is like paging. Get a decade from all your records (events), and then group them into pages (one per decade). Once your repeater relies on this eventsByDecade array, angularjs will do all the heavy lifting.

Here are some suggestions:

After filling in the events variable with your json file, create an array and fill it depending on the dates. To do this, you will need to check event.theDate.getFullYear() on each event.

Then, depending on the year, you can get ten years, possibly using year.substring(0,2) (use only the first 3 digits).

Then, group them by decade in an array, and then assign each decimal array to the eventsByDecade array.

Finally, change the repeater to:

 ng-repeat="event in events | filter:query | orderBy:orderProp:true" 

to use your "paged" array:

 ng-repeat="event in eventsByDecade[currentIndex] | filter:query | orderBy:orderProp:true" 

Here, currentIndex will be set whenever links are currentIndex , for example:

 <li><a href="#decade-1960s" ng-click="currentIndex = 1">1960</a></li> 

Update: json manipulation

JSON evaluates JavaScript objects. So you can iterate over your events as follows:

 for(var event in events){ event.theDate; //this object should have properties such as the date }