Use ng-class in a P tag to assess a variety of expressions

Question

Use ng-class in a P tag to assess a variety of expressions

Is there a way to apply ng-class to automatically evaluate negative values within a < p > tag?

<p <strong>LW$:</strong> {{d.lw_metric}} <strong>LW:</strong> {{d.lw_metric_percentage}} <strong>L4W:</strong> {{d.l4w_metric}}</p>

I currently have the following CSS:

.positive{ color: green}
.negative{ color: red}

However, I am unsure how to instruct Angular to evaluate all the values inside the tag without specifying each one individually like this:

ng-class = "{'positive':data.merchMetrics.LW_CHG_LY >=0,'negative':data.merchMetrics.LW_CHG_LY <0}"

There are five expressions within this tag, so I believe there might be a more efficient approach.

javascript css angularjs ng-class

Answer 1

Answer №1

It is possible to transfer that logic over to the controller for better organization.

ng-class="evaluateClass(data.merchMetrics)"

Controller

$scope.evaluateClass = function(merchMetrics){
    var returnClass = "";
    //The following loop will go through each property of the object
    //and determine which class needs to be applied
    for (var key in merchMetrics) {
       if (merchMetrics.hasOwnProperty(key)) {
          //Additional logic can be added here
          //so that the string will have positive and negative classes once
          if(merchMetrics[key] > 0)
             returnClass = returnClass + "positive "
          else
             returnClass = returnClass + "negative "
       }
    }
    //The class can be returned from here
    return returnClass;
};

Answer 2

It is possible to transfer that logic over to the controller for better organization.

ng-class="evaluateClass(data.merchMetrics)"

Controller

$scope.evaluateClass = function(merchMetrics){
    var returnClass = "";
    //The following loop will go through each property of the object
    //and determine which class needs to be applied
    for (var key in merchMetrics) {
       if (merchMetrics.hasOwnProperty(key)) {
          //Additional logic can be added here
          //so that the string will have positive and negative classes once
          if(merchMetrics[key] > 0)
             returnClass = returnClass + "positive "
          else
             returnClass = returnClass + "negative "
       }
    }
    //The class can be returned from here
    return returnClass;
};

Use ng-class in a P tag to assess a variety of expressions

Answer №1

Similar questions

JavaScript function unable to execute form action properly

What is the best way to apply a CSS class to a div element without affecting its child elements using JavaScript?

Bootstrap 3's Clear:Left Media Query Feature

Refresh a row in real-time by utilizing a modal with JavaScript or jQuery

Ways to verify whether a vue instance is empty within a .vue file by utilizing the v-if directive

Filtering a list with Vue.js using an array of checkboxes

Tips for simultaneously updating a value in multiple collections on firestore?

Performance issues arising from the slow loading of multiple mat tables within a single component

Is there a way for me to update the button text and class to make it toggle-like

Tips for designing a HTML form using classes

Dynamic headers with $save in AngularJS $resource

What is the best way to achieve a precision of 6 decimal places in JavaScript when working with decimals?

Having trouble exporting data from Excel using react-data-export

Navigate through the contents of a table featuring intricate colspan and rowspan elements, while keeping both headers and left columns in

Is it just me, or does `position: fixed;` not actually fix the element to the top?

Error: authentication failed during npm installation due to an incorrect URL

Utilizing the "::first-letter" pseudo element selector in conjunction with the MuiButton class in Material UI - What is the process?

How can I divide AngularJS ng-grid into two separate columns?

Discover captivating visuals that effortlessly occupy the entire breadth, while gracefully encompassing a mere quarter of the total vertical space on the

I'm searching for a universal guidebook on creating web page layouts