Update the background color of a table using AngularJS on the fly

Question

Update the background color of a table using AngularJS on the fly

Is it possible to dynamically change the background of a table cell in HTML using AngularJS?

In this scenario, I am aiming to display a table containing different names along with the status of an object. The status can either be VALID (displayed with a green background) or INVALID (displayed with a red background).

Can this issue be resolved directly within the <td> tag in HTML, or is it necessary to utilize CSS?

<table border="1">
   <tr ng-repeat="object in Cmd.items">
      <td>{{object.objectName}}</td>
      <td>{{object.objectStatus}}</td> //the background color here should vary
   </tr>
</table>

html css angularjs

Answer 1

Answer №1

To achieve this outcome, utilize the ng-class directive:

<tr ng-repeat="item in Ctrl.items">
      <td>{{item.name}}</td>
      <td ng-class="{'red': item.status === 'invalid', 'green': item.status === 'valid'}">{{item.status}}</td> 
</tr>

JS Fiddle Example

Answer 2

To achieve this outcome, utilize the ng-class directive:

<tr ng-repeat="item in Ctrl.items">
      <td>{{item.name}}</td>
      <td ng-class="{'red': item.status === 'invalid', 'green': item.status === 'valid'}">{{item.status}}</td> 
</tr>

JS Fiddle Example

Answer 3

Answer №2

If you want to dynamically apply CSS classes in Angular, you can utilize ng-class directive.

For example:

<div ng-class={'green-bg':isValid, 'red-bg':!isValid}> </div>

In this code snippet, green-bg and red-bg represent CSS classes that will be applied based on the value of the isValid property. This property determines whether the element should have the 'green-bg' class or the 'red-bg' class.

Answer 4

If you want to dynamically apply CSS classes in Angular, you can utilize ng-class directive.

For example:

<div ng-class={'green-bg':isValid, 'red-bg':!isValid}> </div>

In this code snippet, green-bg and red-bg represent CSS classes that will be applied based on the value of the isValid property. This property determines whether the element should have the 'green-bg' class or the 'red-bg' class.

Answer 5

Answer №3

CSS Styling :

.invalid{
background-color:red;
}

.valid{
background-color:green;
}

HTML Table with AngularJS:

<table border="1">
   <tr ng-repeat="item in itemList">
      <td>{{item.name}}</td>
      <td ng-class="item.status">{{item.status}}</td> //color background based on status
   </tr>
</table>

Answer 6

CSS Styling :

.invalid{
background-color:red;
}

.valid{
background-color:green;
}

HTML Table with AngularJS:

<table border="1">
   <tr ng-repeat="item in itemList">
      <td>{{item.name}}</td>
      <td ng-class="item.status">{{item.status}}</td> //color background based on status
   </tr>
</table>

Answer 7

Answer №4

This issue can be resolved either within the td tag itself or in your external CSS file.

In HTML

     <td ng-style="{'background': (object.objectStatus=='VALID') ? 'green' : 'red'}">
        {{object.objectStatus}}
      </td>

If using external CSS, you have the option to implement @oto lolua's solution.

Answer 8

This issue can be resolved either within the td tag itself or in your external CSS file.

In HTML

     <td ng-style="{'background': (object.objectStatus=='VALID') ? 'green' : 'red'}">
        {{object.objectStatus}}
      </td>

If using external CSS, you have the option to implement @oto lolua's solution.

Update the background color of a table using AngularJS on the fly

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to transmit a JSON object to REST services using Angular?

Using Angular Directive to Process Array of Objects

Executing a YUI function via HTMLJSGlobal called is feasible

Achieving Precision: Input Field Accentuated by Focus

What is the best way to position a <td> element within a table row underneath another <td>?

Managing forms with Bootstrap

Is it possible to use Meteor with the latest version of Angular 2?

Reduce the width of a div using Bootstrap

Incorporate a CSS-styled Hyperlink Button into a Jquery Loopedslider

The information is not appearing in the dropdown menu

Trouble with executing a jQuery dynamic loop for each item

UI-Bootstrap selectively adds modal backdrop to specific elements

Vertical menu causing problem with smooth scrolling link effect

Bizarre Actions of a JavaScript Object

What causes the 'Illegal invocation' error to be thrown in AngularJS when using promise construction?

Pressing the enter key in an AngularJS form does not trigger submission

Having trouble with ui-sref functionality within a Bootstrap dropdown menu

Alter the button's color seamlessly while staying on the same page

Creating distinct identifiers for table cells utilizing the map function

Tips for arranging divs in CSS grid with grid-template-areas technique