Creating Wrapper Div Using Loops And Ng-class In Angularjs

I'm currently working on creating a dynamic timeline using AngularJS. The data from my timeline is fetched from a JSON file, which I have already been successfully able at configur

Solution 1:

Here is the general idea:

This is similar to paging. Get the 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 guidelines:

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

Then, depending on the year you can then get the decade, maybe using year.substring(0,2) (use just the first 3 digits).

Next, group them by decade in an array and then assign each decade array into a master eventsByDecade array.

Finally, change your repeater from:

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 the links are clicked, for example:

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

Update: Manipulating json

JSON Evaluates to JavaScript Objects. So you can iterate over your events like this:

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