Modify the filtered class of ng-repeat using the $index value from the controller

Question

Modify the filtered class of ng-repeat using the $index value from the controller

Here is my ng-repeat code:

<div class="{{event.who_seen_it | newEvent}}" ng-repeat="event in eventList" ng-click="openEvet(event.title,$index)">
    <h3 class="event-title">{{event.title}}</h3>
</div>

I am using the {{event.who_seen_it | newEvent}} to apply a class to each repeated element. I would like to modify the output of this filter newEvent, add a new class to the current element, or remove the filter {{event.who_seen_it | newEvent}} by clicking on each repeated element.

I want to accomplish this using the $index from the controller. How can I achieve this?

javascript angularjs

Answer 1

Answer №1

To easily add or remove classes, utilize the power of ng-class. By creating a map with key:value pairs where the key represents the class and the value is a condition that, when met, adds the specified class to the element. For example, if we have a class called visited:

<ul>
  <li ng-repeat="event in ctrl.eventList track by $index" 
      ng-class="{'visited': event.visited}"
      ng-click="event.visited = true">{{event.title}}</li>
</ul>

Upon clicking an event, the visited property is set to true, triggering the addition of the visited class to the <li> element.

The ng-class directive allows for multiple key/value pairs with different conditions to be defined within an object/map structure. Explore this concept further in this example on Plunker.

For more information on how to effectively use ng-class, refer to the official ng-class documentation as there are various ways to leverage its capabilities.

Answer 2

To easily add or remove classes, utilize the power of ng-class. By creating a map with key:value pairs where the key represents the class and the value is a condition that, when met, adds the specified class to the element. For example, if we have a class called visited:

<ul>
  <li ng-repeat="event in ctrl.eventList track by $index" 
      ng-class="{'visited': event.visited}"
      ng-click="event.visited = true">{{event.title}}</li>
</ul>

Upon clicking an event, the visited property is set to true, triggering the addition of the visited class to the <li> element.

The ng-class directive allows for multiple key/value pairs with different conditions to be defined within an object/map structure. Explore this concept further in this example on Plunker.

For more information on how to effectively use ng-class, refer to the official ng-class documentation as there are various ways to leverage its capabilities.

Modify the filtered class of ng-repeat using the $index value from the controller

Answer №1

Similar questions

Ways to verify that window.open is being invoked from a React component

change the css back to its original state when a key is pressed

Utilize Webpack to integrate redux-form as an external library

The componentWillUnmount method is not being called

Error: Undefined object while trying to access 'injection' property

Animating Chart.js 2 from right to left instead of from top to bottom

Is there a way to link a particular model table with a designated user table?

What could be causing the ng-options to not fill up this dropdown?

Uncover the solution to eliminating webpack warnings associated with incorporating the winston logger by utilizing the ContextReplacementPlugin

Textures have been added by the user in the three.js platform

Is it possible for JavaScript to interface with MySQL databases?

Change the page using JavaScript after submission

Developing Reactive Selections with Material-UI is made easy

Tips for reusing multiple sequences of chained transitions in D3

What is the process for attaching an on-click event listener by utilizing an argument that is passed to a function in JavaScript?

What is the best way to prevent a draggable div from moving past the edge of the viewport?

What is the process for executing Selenium IDE scripts in Selenium RC?

Is there a way to selectively include a filter in ng-repeat within a directive?

Tips for creating a dynamic menu item that stands out with a highlighted style

Having trouble accessing a CSV file with JQuery and FileContentResult?