Ways to manage multiple scenarios in ng-class by utilizing the ternary operator for more than two cases?

My current code looks like this:

<div class="vision" ng-class="data.quote > 0 ? 'blue-rapid' : 'gray-rapid'"></div>

While the above code is easy to understand, I encountered a scenario where data.quote could be equal to 0.

In an attempt to handle this scenario, I modified the code as follows: 

<div class="vision" ng-class="data.quote > 0 ? 'blue-rapid' :
 (data.quote == 0 ? 'black_rapid' : 'gray-rapid')"></div>

Despite my efforts, it didn't yield the desired outcome.

Can anyone offer some guidance on how to tackle this issue?

Thank you.

javascripthtmlcssangularjs

Answer №1

Avoid this approach. Utilizing the ng-class directive with a method is more recommended for handling such complex logic. Placing excessive logic within a directive is not ideal.

A potential implementation in your view could resemble:

<div class="vision" ng-class="getQuoteClass(data)"></div>

Your JavaScript might take on a form like (based on your requirements):

// Possibility to also use controllerName.prototype.getQuoteClass()...
$scope.getQuoteClass(data) {
  if (data.quote > 0) {
    return 'blue-rapid';
  }
  return data.quote === 0 ? 'black_rapid' : 'gray-rapid';
}

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

Using $q.when to simulate AJAX calls through an httpBackend mock with ES6 Promises

When attempting to simulate a response to a JSONP GET request using a function that returns an ES6 promise wrapped in $q.when(), everything seems to be working fine. However, during unit testing, the request isn't intercepted by $httpBackend and goes ...

javascriptangularjsajaxunit-testingjasmine

Is there a way to ensure an AJAX call doesn't complete until my handlebar template has finished loading?

Currently, I am working with a handlebars template to display some information on my navigation bar. This information is retrieved from a Rails controller through an AJAX call. The issue I am facing is that since AJAX is asynchronous, it completes after th ...

javascriptjqueryruby-on-railsajaxhandlebars.js

Understanding this JavaScript code involving shorthand if statements and commas can be achieved by breaking it down step by

Upon encountering this function within the codebase (which is compiled with webpack), my curiosity was piqued and I wanted to delve into its workings. Initially, my eyes fell upon t.length > 100. If it's greater than 100, then the next condition i ...

javascript

"Problem with binding a dropdownlist to an object causing the selected object not to return

I have successfully bound an object to a dropdownlist using Knockout 2.2.1. The binding correctly displays the items in the list, but I am facing difficulties retrieving the selected OBJECT. To illustrate this issue, I have created a JSFiddle: http://jsfid ...

htmlselectdrop-down-menubindingknockout.js

Are pseudo selectors compatible with styled-components like they are in traditional CSS when using unicode characters?

I am facing a challenge with my styled-component code. I want to use a unicode character \00d7 as the content for a pseudo selector, which represents a close or cross icon. Unfortunately, this approach doesn't seem to work as expected in styled- ...

javascriptcssreactjsstyled-components

implement express.bodyParser() alongside passport.js

Currently, I am developing a node server utilizing express.js and passport.js. I have encountered a situation where I need to avoid using the express.bodyParser() prior to app.use(passport.initialize()) and app.use(passport.session()). When I include app.u ...

javascriptnode.jsexpresspassport.js

Using PHP session variables in AJAX requests

I am struggling with utilizing a session variable in an AJAX request. Here is the setup: i. index.php require_once('config.php'); <script class="include" type="text/javascript" src="js/jquery.manage.js"></script> ii. config. ...

javascriptphpajaxsession

Why is there an issue with the way I am defining this Javascript variable?

In my JavaScript file, milktruck.js, I have defined an object called TruckModel. My goal is to create an array of TruckModel objects because in my multiplayer game, I cannot predict how many players will enter or exit at any given time. The issue I am fa ...

javascriptarraysvariablesobjectdeclaration

Error with review score in material-ui for react.js

There is an issue with my code where the ratings from different sets are not behaving independently. When a rating in one set is clicked, only the first set of ratings changes, suggesting that there is a connection between all the sets. https://i.sstatic. ...

javascriptreactjswebmaterial-ui

Guide on retrieving POST data in sveltekit

Hello, I'm new to sveltekit and I am trying to fetch post data in sveltekit using a POST request. Currently, I am utilizing axios to send the post data. const request = await axios .post("/api/user", { username, email, ...

javascriptnext.jssveltesveltekit

Hide popup using HTML when clicking outside of it

Currently, I have implemented Bootstrap Popover with HTML content using the code snippet below. This code is based on the answer provided at . $(".song-status-link").popover({ html: true, placement: 'bottom', ...

jquerycsstwitter-bootstrap-3popover

The push action in NavController is not displaying Google Maps as expected

Trying to display a map upon clicking a button is proving challenging for me. It appears that the function NavController.push() does not work as expected, while NavController.setRoot() does. Despite not encountering any errors, I am unable to identify the ...

htmlgoogle-mapstypescriptionic2

Best practices for effectively managing errors within JSON web tokens

I am a novice attempting to manage JWT verification. Within the function below, my goal is for the system to generate a new access token based on the refresh token if the user's access token has expired. import { asyncHandler } from "../utils/asy ...

javascriptnode.jsexpressjwtmern

The UILabel in the UITableViewCell is mysteriously increasing in font size with each call to `willDisplay

In my app, I have a UILabel placed within a table cell. Initially, I set its font using the interface builder. However, when the cell is displayed, I take an HTML string and convert it to an NSAttributedString, making sure to use the label's font type ...

htmliosuitableviewuilabelnsattributedstring

Perform a Fetch API request for every element in a Jinja2 loop

I've hit a roadblock with my personal project involving making Fetch API calls to retrieve the audio source for a list of HTML audio tags. When I trigger the fetch call by clicking on a track, it always calls /play_track/1/ and adds the audio player ...

javascriptpythonflaskfetchjinja2

Calculating the position of a parallax background within a window

Seeking assistance with what initially seemed like a straightforward task, but has now become quite puzzling. I'm currently working on a basic jQuery script that binds to the window scroll function. Despite seemingly having all the necessary variable ...

javascriptjqueryparallax

Combine, blend, or expand information

I am facing a challenge in passing data to a PHP function and cannot seem to merge the data successfully. My goal is to include a progress bar during the loading process. Here is the code snippet: AJAX $(document).on('click', '#submit_but ...

javascriptjqueryajax

Rotating and spinning images with HTML/CSS while also adding an ease-out effect

After experimenting with numerous CSS snippets, I found that none fulfill all my requirements. Here's what I'm aiming to achieve within the function myspin(x){}: 1.) Rotate image x degrees invisibly on click 2.) Then smoothly animate a spin o ...

javascriptcsshtml

obtain direct access to the $scope variable when using ng-if

Is there a more effective way to access scope created by ng-if in my directive without using $parent.params.text? <span ng-if="params" uib-tooltip="{{params.text}}"></span> .directive('myDirective', functions(){ return { te ...

angularjsangular-ng-if

Manipulate sibling elements using jQuery's addClass and remove methods

I have implemented a function that adds the class active to elements when they reach the top of the browser, ensuring that the next element will scroll in over the top. While this works smoothly in Chrome, I am encountering some jumping behavior when testi ...

javascriptjqueryhtmlcss