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

Loading Ajax content on a webpage

Can you provide instructions on creating a marker like this in an unordered list?

Guide on using javascript to alter a json structure

The element's height appears to be fluctuating unexpectedly when I attempt to adjust it using percentage values within a narrow range

Can a child element be positioned above its parent's y-scrollbar using CSS?

broadcast updated $rootScope

Access inner element with AngularJS directive

What steps are involved in creating a circular shape on canvas?

Resolving duplicated controller code in Angular using UI.Router

Can TypeScript be used to dynamically render elements with props?

Positioning of bottom navigation bars

What steps can I take to maintain the width while implementing jQuery's slideUp function?

What is the best way to activate an @keyframe animation based on the scrolling action?

Issue with handling click events on action column in Datatable using jQuery

Infinite scroll causing Firebase ".length" function malfunction

Return to the beginning using Jquery Mobile

What's the best way to ensure my website's footer spans the entire width of the webpage?

I keep receiving multiple header errors from ExpressJS even though I am positive that I am only sending a single header

Equal gutters are present between CSS floats

Angular 6: Harnessing the Power of Subject