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

What is the best way to send a JavaScript array to a Perl script using AJAX?

The problem of a static click function not working when clicked on a link. What is the solution for this

Having trouble triggering the onclick event on a dynamically created table using JavaScript

evt.target consistently returns the initial input within the list of inputs

AngularJS is a powerful tool for implementing URL restrictions in web applications

Encountering a NaN outcome when summing values from various select options

Vue.js blocks the use of iframes

Strategies for increasing a value within an asynchronous function

Utilizing BehaviourSubject for cross-component communication in Angular

Display text when hovered over or clicked to insert into an HTML table

What is the best way to manage zoom settings following a completed search query?

Form fields will not automatically populate with link parameters; the user must manually input the information

Increment Counter on Presence of Items in a Table with jQuery

When using window.open in Chrome on a dual screen setup, the browser will bring the new window back to the

How can I eliminate the empty spaces around a bar chart in Kendo UI?

Unleash the full power of Angular Components by enhancing them with injected

Difficulty in using window.scrollTo within useEffect in reactJS

Retrieve the information from the API and populate the tables with the data

I am facing difficulties accessing an element within a controller in Angular

Elevate state in React to modify classNames of child elements