How to make a specific table row stand out using AngularJS and CSS

Can you provide advice on how to highlight a specific row in a table?

I have a table along with some angular code snippets. Here's an example:

angular.module('myApp', []).controller('myTest', function($scope) {

 var data = [];
 for(var i = 0; i < 10; i++) {
      data[i] = i;
 }
 $scope.data = data; 

});

HTML:

<table ng-app="myApp" ng-controller="myTest">
 <tr ng-repeat="x in data">
      <td > {{ x }} </td>
 </tr>
</table>

http://jsfiddle.net/omarjmh/Lvc0u55v/1895/

Is there a way to apply CSS to highlight a row when a condition is met, like changing the color to blue if x equals 1?

Thank you!

Answer №1

If you want to alternate colors in your HTML table rows, you can use $even and $odd for this purpose.

angular.module('myApp', []).controller('myTest', function($scope) {

 var data = [];
 for(var i = 0; i < 10; i++) {
      data[i] = i;
 }
 $scope.data = data; 

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "myApp">
  <div ng-controller="myTest">
 <table >
 <tr ng-repeat="x in data" ng-style="{'background-color': ($even ? 'green' : 'red')}">
      <td > {{ x }} </td>
 </tr>
</table>
   </div>
</div>

Answer №2

To utilize ngStyle:

tr ng-repeat="x in data" ng-style="{'background-color': (x === 1 ? 'blue' : 'white')}"

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

What is preventing my h1 styles from being applied to an h1 element within a <section> tag?

I have a headline in my header and in another part of the content. I've been told that this can impact SEO, but I'm just starting out by copying other people's pages and trying to replicate their styles without looking at their code. The st ...

What is the best way to establish a connection between two applications using React and Node

Currently, I am facing a challenge with integrating two separate applications. One is a login/registration form written in Node.js, Express.js, React.js, and MySQL. The file structure looks like this: https://i.sstatic.net/th6Ej.png The other application ...

Exploring the functionality of angular reactive forms in creating intricate JSON structures

After numerous attempts to resolve the issue on my own, I am reaching out to an Angular developer for assistance. My goal is to display a JSON object in the UI: Here is the JSON Object : items={"departure":"New York","arrival":"California","stations":[ ...

Is it possible to incorporate the arrow function within the debounce function?

export const debounce = (callback: Function, ms = 300) => { let timeoutId: ReturnType<typeof setTimeout> return function (...args: any[]) { clearTimeout(timeoutId) timeoutId = setTimeout(() => callback.apply(this, args), ms) ...

What is the most efficient way to transform HTML into React components effortlessly?

I have been attempting to automate the process of converting HTML into React components. I followed the link below to automatically convert HTML into React components: https://www.npmjs.com/package/html-to-react-components However, I encountered an issue ...

show a pie chart at the top of the div using highcharts

i am struggling with positioning the high-chart with a label, as seen in the image below https://i.sstatic.net/m9bXW.png does anyone know how to properly display the chart from the top left corner? i have attempted to adjust the settings like this { ...

I am encountering undefined values when utilizing momentjs within Angular

My project is utilizing angular and momentJS, with the addition of the angular-moment library. You can find my current progress in this fiddle However, I am encountering an error when trying to use moment in a controller method: TypeError: undefined is n ...

How to line up two blocks side by side in a single block with Bootstrap without the use of CSS

The bootstrap margin is causing issues with this code <div class="row"> <div class="row1 col-lg-3"> <div class="row2 col-lg-1"></div> <div class="row2 col-lg-1"></di ...

Harnessing the power of service binding in AngularJS

I am utilizing a service to facilitate data sharing between two controllers and retrieve a list of data: myApp.service('DataService', function($http) { this.data = []; this.loadData = function() { $http.get('/api/data') ...

Which tool would be better for starting a new Angular project: angular-seed or yeoman?

I'm having trouble deciding on the best approach to create a new AngularJS application. There seem to be various methods available, such as using angular-seed from https://github.com/angular/angular-seed or yeoman - http://www.sitepoint.com/kickstar ...

When using a PhoneGap app to access a webservice, are there any potential cross-site issues that could arise?

How can I access an external web service from a PhoneGap app using AJAX without needing to rely on CORS or JSONP to bypass the cross-origin issue? I've come across a question on Stack Overflow suggesting that cross-site HTTP calls are not a problem wi ...

What is the necessity for an additional item?

After exploring the Angular Bootstrap UI and focusing on the $modal service, I came across an intriguing discovery. In their demo at 'http://plnkr.co/edit/E5xYKPQwYtsLJUa6FxWt?p=preview', the controller attached to the popup window contains an i ...

The nested click event is not functioning as expected

Below is a simplified version of HTML code containing 2 nested click events (one on the href and one on an input). When the user clicks on the input field, it inadvertently triggers the javascript function SelectTable() linked to the href event. This unint ...

Automatically selecting and fetching checkbox values using JavaScript

I was struggling with coding a function that involved generating checkboxes using JavaScript. My goal is to automatically select the elements "March" and "September" from the array target[] and display them as checked in the text area. So, "March" and "Se ...

What is the correct way to define an abstract method within a class to ensure that an IDE detects and notifies if the abstract method is not implemented

Is there a way to properly define an abstract method in an abstract class and have the IDE notify us if we forget to implement it? I attempted the following approach, but it did not work: export abstract class MyAbstractClass { /** * @abstract ...

Designing numerous vertical lists in HTML

I need help with displaying multiple lists vertically using HTML For example: +--------+---------------------------------------------+--+ | Global | Region Country Currency Account Type Entity | | +--------+---------------------------------------------+ ...

Issue with React and JavaScript: Object is displayed on the console briefly before disappearing

I am having an issue with my sign up page where the console log of the two fields disappears after a second. I would appreciate any assistance on this matter. Below is the code for the sign-up form: export default function SignUp() { const [firstNam ...

Tips to position a div directly on top of table cells using absolute positioning

I have a div inside the second table cell that I want to position absolutely right outside the <td>. Currently, the issue is that the <td> elements below are overlapping the div. Eventually, each <td> will contain a div that appears on ro ...

Incorporating the id attribute into the FormControl element or its parent in Angular 7

I'm attempting to assign an id attribute to the first invalid form control upon form submission using Angular reactive forms. Here is my current component code: onSubmit() { if (this.form.invalid) { this.scrollToError(); } else { ...

Issue: 'The server cannot be started because the path is not defined' error message appears

Hey everyone, I'm currently working on implementing a forgot/reset password feature for my React Native app using this tutorial. However, when attempting to start the server, I encountered an error related to the 'path'. ReferenceError: pat ...