Modify the background color of a particular row in a dynamic table with the help of AngularJS

Question

Modify the background color of a particular row in a dynamic table with the help of AngularJS

My dynamic table consists of the following:

<table id="thetable">


            <tr> 

                <th class="th2">&nbsp;&nbsp;Id&nbsp;&nbsp;</th>
                <th class="th2">&nbsp;&nbsp;Attivo&nbsp;&nbsp;</th>
                <th class="th2">&nbsp;&nbsp;Capacità&nbsp;&nbsp;</th> 
                <th class="th2">&nbsp;&nbsp;Zona&nbsp;&nbsp;</th>
                <th class="th2">&nbsp;&nbsp;Stato&nbsp;&nbsp;</th>

         </tr> 

            <tr style="cursor:pointer"  ng-repeat="staffdispenser in staffdispensers">  

        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.iddispenser }}</td>  
        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.stateOn }}</td> 
        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.capacity.type }}</td>
        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.geoArea.city }}</td>  
        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ (count[$index]*100)/(staffdispenser.dispenser.capacity.depthForSection*staffdispenser.dispenser.capacity.nsections) }}%</td>  

        </tr>  

        </table>

The purpose is to change the background of specific td elements within rows where "count[$index]100)/(staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections)" is less than 0.5

This is a visualization of how I want it done:

https://i.sstatic.net/1Ba2o.png

I am aiming for a result similar to this:

https://i.sstatic.net/a6a0s.png

javascript html css angularjs angularjs-ng-repeat

Answer 1

Answer №1

Are you familiar with the ngClass directive?

You have the ability to apply it to your HTML elements in this manner

<td ng-class="{'yellow-background': (count[$index]100)/(staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections) < 0.5 }"></td>

However, there seems to be a syntax error in your code. What does the 100 stand for?

count[$index]100)/(staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections)

Answer 2

Are you familiar with the ngClass directive?

You have the ability to apply it to your HTML elements in this manner

<td ng-class="{'yellow-background': (count[$index]100)/(staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections) < 0.5 }"></td>

However, there seems to be a syntax error in your code. What does the 100 stand for?

count[$index]100)/(staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections)

Answer 3

Answer №2

Greetings Alfonso,

If you're interested in utilizing ngClass, I suggest checking out this resource for a detailed example:

https://docs.angularjs.org/api/ng/directive/ngClass

This attribute can be used on the element to dynamically apply a specified class based on conditions.

Here's an illustration:

            <tr style="cursor:pointer"  ng-repeat="staffdispenser in staffdispensers" ng-class="{'special-row-color': staffdispenser.isMyCondition == true}">  

        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.iddispenser }}</td>  
        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.stateOn }}</td> 
        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.capacity.type }}</td>
        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.geoArea.city }}</td>  
        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ (count[$index]*100)/(staffdispenser.dispenser.capacity.depthForSection*staffdispenser.dispenser.capacity.nsections) }}%</td>  

        </tr>

I recommend creating a function within the controller to handle the conditional logic for applying classes.

Answer 4

Greetings Alfonso,

If you're interested in utilizing ngClass, I suggest checking out this resource for a detailed example:

https://docs.angularjs.org/api/ng/directive/ngClass

This attribute can be used on the element to dynamically apply a specified class based on conditions.

Here's an illustration:

            <tr style="cursor:pointer"  ng-repeat="staffdispenser in staffdispensers" ng-class="{'special-row-color': staffdispenser.isMyCondition == true}">  

        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.iddispenser }}</td>  
        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.stateOn }}</td> 
        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.capacity.type }}</td>
        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ staffdispenser.dispenser.geoArea.city }}</td>  
        <td ng-click="changePath(staffdispenser.dispenser.iddispenser)"> {{ (count[$index]*100)/(staffdispenser.dispenser.capacity.depthForSection*staffdispenser.dispenser.capacity.nsections) }}%</td>  

        </tr>

I recommend creating a function within the controller to handle the conditional logic for applying classes.

Answer 5

Answer №3

It appears that there is an abundance of logic within the Angular {{ }} expressions, which could be better managed in a controller for improved organization.

The query states:

I need to alter the background color of certain rows in a table where the condition "count[$index]100)/(staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections)" is less than 0.5 is met.

To achieve this, the <td> element should be structured as follows:

<td ng-class="getClass($index)">{{ myLogicHere }}</td>

In your controller, implement the following:

$scope.getClass = function(index) {
  var value = count[index]100)/(staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections;
  return value < .5 ? 'highlight-class' : '';
};

You may need to customize this according to the specifics of your controller's properties and requirements.

Answer 6

It appears that there is an abundance of logic within the Angular {{ }} expressions, which could be better managed in a controller for improved organization.

The query states:

I need to alter the background color of certain rows in a table where the condition "count[$index]100)/(staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections)" is less than 0.5 is met.

To achieve this, the <td> element should be structured as follows:

<td ng-class="getClass($index)">{{ myLogicHere }}</td>

In your controller, implement the following:

$scope.getClass = function(index) {
  var value = count[index]100)/(staffdispenser.dispenser.capacity.depthForSectionstaffdispenser.dispenser.capacity.nsections;
  return value < .5 ? 'highlight-class' : '';
};

You may need to customize this according to the specifics of your controller's properties and requirements.

Modify the background color of a particular row in a dynamic table with the help of AngularJS

Answer №1

Answer №2

Answer №3

Similar questions

Is the fetch function returning data in a format that is not ideal?

Combining the power of AngularJS with the versatility of sails

Using PHP to swap out HTML elements

What are the steps to turn off responsive view in WordPress?

Tips for utilizing a for loop within an array extracted from a jQuery element for automation

When the phone locks, Socket.io experiences a disconnection

Leverage the power of dynamic type implementations within Angular framework

What is the best way to display a fresh jade view when a socket event occurs?

Encountering a RangeError in FusionCharts with VueJS, I faced the issue of exceeding the maximum call stack size while trying to

Clicking on a radio button can trigger the selection of another radio button

What is the best way to assign names to images in a Rails application?

Creating a webpage header with Javascript to mimic an existing design

Angular provides the capability to sort through data using various criteria

What is the best way to ensure a bottom tooltip stays perfectly aligned with the right edge of its corresponding element?

How can I shift the button's location within a pop-up in Ionic 1?

What is the process for incorporating an additional input in HTML as you write?

At a specific media query breakpoint, links are disabled while the rest continue to function without any

Unseen related model fields

Seeking guidance on selecting text using XPath

CSS: Is it possible to make a div even smaller than the invisible padding of a font?