Confirm the value of $index and apply a specific style

Trying to figure out how to highlight a table row using AngularJS within a directive. Here is some pseudo code I came up with:

if(highlight.indexOf($index) != -1) set .highlight css class

Below is an example of my code snippet:

$scope.highlight  = [0,2,3]
.highlight {
  color: red;
}
<table class="ui celled table">
  <thead>
    <tr>
      <th>AAA</th>
      <th>BBB</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="a in as track by $index"> <!-- The ng-class needs to be here, but where should i do the verification? -->
      <td>{{a}}</td>
      <td>{{b[$index]}}</td>
    </tr>
  </tbody>
</table>

Answer №1

To apply styling dynamically in AngularJS, utilize the ng-class directive immediately following the ng-repeat statement:

<tr ng-repeat="item in items track by $index" ng-class="{selected: selectedItems.indexOf($index) > -1}">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Discord bot encountered a TypeError while attempting to access the property 'id' of an undefined value

After revisiting a previous Discord bot package designed to track website updates, I encountered an issue. The code was originally scraped and last edited about 8 months ago with success. However, upon running node index.js, the following error occurred. ...

Analyzing the structure according to the month/week/year

My array consists of count and date values: day = [ { count: 1, date: '2022-07-07' }, { count: 1, date: '2022-08-14' }, { count: 2, date: '2022-07-19' }, { count: 4, date: '2022-07-19' }, { count: 2, date: ...

What is the process for running .js files on my browser from my local machine?

Hi there! I'm trying to figure out how I can create a JavaScript game in TextMate on my Mac. I want to have a regular .js file, then open it and run it in Chrome so that whatever I have coded - for example, "Hello World!" - will display in the browser ...

Fresh ajax requests are not clearing the current data displayed in the JSP table

My ajax function retrieves data from a servlet and displays it in the page successfully. However, each time a new ajax call is made, the form appends the new data to the existing results instead of replacing them. I need to reset the current values stored ...

Using HTML tags with AngularJS's limitTo function

How can I limit the number of characters displayed in AngularJS when dealing with text that contains HTML tags? $scope.text = "<span><h1>Example</h1><p>Special Text</p></span>" $scope.maxNumberOfChar = 10; I need to ...

Remove an array key from a MongoDB collection

I am currently working with mongoDB and my JSON data (stored under the table name "student") appears as follows: [{ name : "John", subjects:["English", "Maths"] }, { name : "Winsel" ...

Determine whether a JavaScript string exclusively consists of punctuation marks

In an if statement, I want to verify whether the given string contains any punctuation. If it does contain punctuation marks, I intend to display a pop-up alert message. if((/*regex presumably*/.test(rspace))==true||(/*regex presumably*/.test(sspace))==tr ...

Sending a batch of files through an axios request by passing them as an object

I need to send multiple images in a specific format through an API call { "date":"currentDate", "files":[Files uploaded via input box] } Here is my approach: Method 1 const event = document.querySelector("#files"); const f ...

Managing all mouse interactions simultaneously in ReactJS

I've successfully created a button: <button className='collapse-button' onClick={() => {setTopNavigationBarCollapse(!topNavigationBarCollapse)}}>&#9776;</button> Now, I'm wondering if there's a way to call the s ...

Tips for identifying and swapping values/parameters in a URL during redirect

To provide more clarity on my inquiry, I will outline the details below: There are three links: Link A, Link B, and Link C Link A: {c_val} Link B: {id} Link C: In the database, there is a value adgaf7g6adf6gadfg8a86fgs9f6g The main focus here is when ...

An approach to looping through arrays within an object in JavaScript

I have a JSON structure that consists of an array containing arrays, each holding dictionary elements. This data is retrieved from a function-based view. I am looking to iterate through all the elements and filter out arrays with empty dictionaries. data. ...

Vows: proceed to the subsequent error handling process

Can you explain how to properly call the next error function using promise chaining? I initially believed that placing a return statement within the error function would automatically trigger the next error function. //This code is executed in a contr ...

Troubleshooting issue with TypeScript: Union types not functioning correctly when mapping object values

When it comes to mapping object values with all primitive types, the process is quite straightforward: type ObjectOf<T> = { [k: string]: T }; type MapObj<Obj extends ObjectOf<any>> = { [K in keyof Obj]: Obj[K] extends string ? Obj[K] : ...

Receive information from a form and store it in an array

Struggling to figure out how to convert this into an array. I'm having trouble grasping the concept of taking input from a form and storing it in an array. In my project instructions, it clearly states: Do NOT save the input in variables and then tra ...

Refreshing the browser causes the URL to be updated due to the utilization of $routeProvider for client-side routing

Currently, I am developing a single-page application using Angular for the client-side and Nodejs (Express) for the server-side. To manage different views and browser history, I am utilizing $routeProvider in Angular. While everything works smoothly withou ...

Retrieving a variable value set within a jQuery function from within an Angular 2 component

In the current project, I am facing a situation where I need to work around and initialize jQuery datetimepicker inside an Angular 2 application (with plans to refactor it later). However, when I assign a datetime value to a variable, I encounter a proble ...

Learn how to implement a search filter in Angular by utilizing the "| filter" directive in your controller with a specific text query

Can you help with this code challenge? jsfiddle.net/TTY4L/3/ I am attempting to create a filtering list, where if I enter a value like 'avi', the list should display as: Avi Ravi, I understand the logic to achieve this: {{['Avi',&a ...

Error: The "map" property cannot be read if it is undefined in a Django and React application

While I was following the react and django tutorial, I encountered an issue when I added some code for concern with. The error message 'Cannot read property 'map' of undefined' keeps getting thrown. The error location is pointed out ...

Simple method for converting pixel values to em units

I'm searching for a simple method to incorporate a line of code into one of my plugins in order to convert specific pixel values into em values. My project's layout requires the use of ems, and I'd prefer not to rely on external plugins for ...

Performing an HTTP POST request in Angular 2

After starting my work with Angular 2 and TypeScript, everything was going great. However, I encountered an issue when working with a REST API (POST) where the console log displayed Response {_body: "", status: 204, statusText: "Ok", headers: Headers, type ...