Generating a container DIV with loops and ng-class in AngularJS

Question

Generating a container DIV with loops and ng-class in AngularJS

Currently, I am working on developing a dynamic timeline using AngularJS. To populate my timeline, I have successfully configured the data fetching from a JSON file. You can see what I have accomplished so far on PLNKR: http://plnkr.co/edit/avRkVJNJMs4Ig5mDrwJ8

The navigation structure I am currently using is:

<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 aim to create wrapper divs for each unique ID like "decade-1960s", "decade-1970s", etc., allowing users to easily navigate to their desired decade using the provided navigation links. As the date information is extracted from the JSON file, I am exploring ways to extract the year from the JSON, categorize events by decades, and dynamically add a wrapper for each decade.

Thank you for your assistance! I understand it may seem complex, but as a front-end developer and designer, I prefer focusing on the visual aspects rather than backend programming.

javascript angularjs wrapper timeline

Answer 1

Answer №1

Let's take a look at the main concept:

This process is akin to organizing data into pages based on specific criteria, much like paging. By extracting the decade from all your records (events) and grouping them accordingly (one page per decade), you can streamline the functionality of your repeater using the eventsByDecade array in AngularJS.

Below are some important pointers to follow:

Once you have populated your events variable with data from a JSON file, create an array and populate it based on the event dates. To achieve this, you will need to extract the year information using event.theDate.getFullYear() for each event entry.

Following that, determine the respective decade based on the year by possibly utilizing year.substring(0,2) (consider only the first 3 digits).

Subsequently, organize the events into groups by decade within an array and then allocate these decade arrays into a primary eventsByDecade array.

To finalize, modify your repeater setup from:

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

to utilize your "paged" array as shown below:

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

In this case, ensure to set the value of currentIndex whenever the corresponding links are clicked. For instance:

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

Update: Working with JSON objects

Remember that JSON evaluates to JavaScript Objects. Hence, you can iterate through your events in the following manner:

for(var event in events){
 event.theDate; //this object should contain properties like the date
}

Answer 2

Let's take a look at the main concept:

This process is akin to organizing data into pages based on specific criteria, much like paging. By extracting the decade from all your records (events) and grouping them accordingly (one page per decade), you can streamline the functionality of your repeater using the eventsByDecade array in AngularJS.

Below are some important pointers to follow:

Once you have populated your events variable with data from a JSON file, create an array and populate it based on the event dates. To achieve this, you will need to extract the year information using event.theDate.getFullYear() for each event entry.

Following that, determine the respective decade based on the year by possibly utilizing year.substring(0,2) (consider only the first 3 digits).

Subsequently, organize the events into groups by decade within an array and then allocate these decade arrays into a primary eventsByDecade array.

To finalize, modify your repeater setup from:

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

to utilize your "paged" array as shown below:

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

In this case, ensure to set the value of currentIndex whenever the corresponding links are clicked. For instance:

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

Update: Working with JSON objects

Remember that JSON evaluates to JavaScript Objects. Hence, you can iterate through your events in the following manner:

for(var event in events){
 event.theDate; //this object should contain properties like the date
}

Generating a container DIV with loops and ng-class in AngularJS

Answer №1

Similar questions

Angular not recognizing draggable true functionality

Click events are unresponsive when used within ng-repeat

Attempting to minimize the number of jQuery calls within a Domino XPage

Utilize the identical ReactJS hook across multiple components

Struggling to iterate through the children of a variable with the help of express-handlebars?

Looking for non-case-sensitive letters in a text input field

Tips for presenting retrieved HTML unchanged within an Angular 2 template

navigation bar directing to the wrong destination

Stop Ajax requests when there are blank spaces in Typeahead.js

I have the ability to see HTTP-only cookies within my web browser

Is there a way to modify my function expression without using any state variables?

Execute the function numerous times that is associated with an asynchronous function in JavaScript

"Obtaining a three.js sprite within a Verold script - the ultimate guide

Creating a Paytm payment link using API in a React Native app without the need for a server

Having trouble displaying the API response data on the screen in Next.js

Navigating to a different page in the app following a document update: a step-by-step guide

In Next.js, a peculiar issue arises when getServerSideProps receives a query stringified object that appears as "[Object object]"

What is the best way to showcase Vue data of a selected element from a v-for loop in a

What is returned by jQuery when it fails to locate a specified class selector within the jQuery object?

JavaScript Function for Finding the Time Difference Between Two Dates (in Years, Days, Hours, or Less than One Hour)