Creating wrapper DIV using loops and ng-class in AngularJS

Question

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 configuring. Here is what I currently have on 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>

I basically want to create wrapper divs for the unique ID's of "decade-1960s", "decade-1970s" etc so that the user can use the navigation to efficiently navigate to the decade they are most interested in looking at. The date is parsed from the JSON file, so I am wondering it there is another to fetch the year from the JSON, organize the events according to particular decades, and then add a wrapper for each decade.

Thanks very much! I know it sounds very complicated! But I'm more of a front-end developer and designer, not so much a back-end programmer.

Answer 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><a href="#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(var event in events){
 event.theDate; //this object should have properties such as the date
}