Adjust the color of the font based on its value

Is it possible to change the color of text on a page based on a specific value?

<div [ng-Style]="color":colorFont({{item.temp.day}})> {{item.temp.day}} {{vm.symbal}}</div><br>

The data {{item.temp.day}} is a numerical value that determines the color of the text. "ntvg" represents string values that also influence the text color.

If item.temp.day is greater than 0, the font color will be red. Otherwise, it will be blue.

Here is the script:

$scope.colorFont=function(var templiche){
    if (parseFloat(templiche)>0) return color="red";
     else {
       return color="blue";
     }
}

Answer №1

It appears that you are blending both Angular 1 and Angular 2 together by utilizing [] (property binding with directive).

Since you are using Angular 1, the ng-style directive should not have square brackets [] around it, and interpolation should not be used inside the ng-style expression.

ng-style="{'color': colorFont(item.temp.day)}"

Additionally, the function should appear as follows:

$scope.colorFont=function(templiche){
     if (templiche>0) return 'red';
      else {
        return 'blue';
      }
}

Forked Plunkr

Answer №2

Always remember to enclose "red" with quotation marks when using the return statement.

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

In my Flask Bootstrap website, the navigation bar remains unchanged by the presence of Javascript

I am currently in the process of creating a navigation bar for my Flask website using Bootstrap. However, when I implemented it into my HTML code, it is not displaying correctly which leads me to believe that the JavaScript may not be functioning properly. ...

Synced Slideshows

Currently experimenting with the Owl Carousel plugin to create multiple synced carousels using their demo at the link below. However, I'm facing a specific issue when dealing with different numbers of small items in each carousel. I've successfu ...

An unexpected import token was encountered while using ReactJS and Babel

Every time I attempt to launch my application, an error message pops up that says: (function (exports, require, module, __filename, __dirname) { import { Row } from '../grid' SyntaxError: Unexpected token import I've experimented with vari ...

Styling CSS for HTML links

I am encountering an issue with a CSS hover effect on an image that is also a hyperlink to another website. The CSS styling for the hover effect seems to be interfering with the functionality of the HTML hyperlink. The image in question is aligned with ot ...

How can the "@" symbol be employed in Angular's $resource?

This excerpt is taken from the documentation. var User = $resource('/user/:userId', {userId:'@id'}); var user = User.get({userId:123}, function() { user.abc = true; user.$save(); }); I am curious about the significance of @id. If ...

Prevent alert box from closing automatically without clicking the ok button in ASP.NET

I'm creating a project in ASP.NET where I need to display an alert box and then redirect to another page. Below is my code: var s = Convert.ToInt32(Session["id"].ToString()); var q = (from p in db.students where p.userid == s ...

Create a placeholder for the module function

Update: Providing more specific details. Our team has developed a Github API wrapper extension and we are looking to test different use cases for it. However, we prefer not to use the API wrapper extension directly during testing and instead want to stub ...

Accessing an HTML file in the browser using an npm script

I have been searching for a solution that doesn't involve installing an npm package to host the file on an http server. All I need is to open a basic HTML file from my local computer in a browser using an npm script, without needing a server. Is there ...

Utilize Javascript to access and manipulate the input using the document

I have an input validator that checks if a user's email and username are not already registered on the website. My code looks like this: Javascript: $(document).ready(function() { $('#email').blur(function(event) { $.get(Ba ...

What is the process for setting up the API key for 'uiGmapgoogle-maps' after bootstrapping?

In my angular project, I am using uiGmapgoogle-maps and need to set the API key. The documentation states that this should be done in the bootstrap process through a config like this: .config(function(uiGmapGoogleMapApiProvider) { uiGmapGoogleMapApiPr ...

JavaScript image search function within the existing page

Building a HTML website is new to me and I lack basic programming skills. I've uploaded 100 animated images to another server and linked them to my HTML website using code like this: <p> <img src="http://.../abc/23118465.gif" alt="teddy be ...

Element not being located by Selenium - TimeoutException

Currently, I am utilizing Selenium to input data into a specific field and then extract information from the results. The process of entering the data works fine, including accepting the cookie pop-up prompt, however, there seems to be an issue with locati ...

Using jquery for creating a dynamic tree menu

Looking to add a tree menu for this example. Initially all sections should be collapsed. Upon clicking on "Facility," the Buildings should expand in a tree-like format, and further clicks on XYZ building should reveal the Floors. Something along those line ...

Generate visual content using JSON data

I'm in need of assistance with generating a set of images through JSON in ASP .NET MVC4. Is this achievable? The code I am working with is shown below, and I am unsure how to incorporate this functionality. Thank you in advance for any help! [Acce ...

Tips for showcasing a block of text within a table cell

I am having trouble displaying a small paragraph within a td table cell. The issue I'm facing is that the paragraph does not appear unless the td cell is flexible. I've attempted using (white-space:pre, and white-space: word-wrap) but it has not ...

Tips for creating a custom vertical grid layout in Bootstrap with specific item placements

I've been on a quest to find a method to display a bootstrap column vertically instead of horizontally. I am adamant about not using masonry or any other external library. My goal is to have "Card 2" appear beneath "Card 1" on medium to small screens ...

Learn how to connect a button to a webpage using jquery while also executing another function when clicked

I would like the showAll button click to redirect to another page where the showAll function is executed and the results are displayed on the new page. Additionally, I am looking for a way to modify the console.log statement to output the result on the new ...

Transforming strings of HTML into objects in the DocX format

After developing a TypeScript script that transforms a JSON string into a Word Doc poster using Docx, I encountered a hurdle. Certain sections of the JSON may contain HTML tags, such as <br/>, <i>, <p>, and I need a way to pass the stri ...

Utilize the keyof operator on a nullable property

Is there a way to utilize keyof in defining function parameters based on an optional field within an Object, while also including a default value? interface test { example?: { choice1: string, choice2: string } } function sample(param: keyof ...

Is it possible to transform the Bootstrap5 sidebar, currently positioned above the block content, into a sticky element on

After creating a Django blog using bootstrap5 and following guidance from the python crash-course book, I encountered an issue with my sidebar placement. Despite trying various methods, I struggled to "override" my blocks in order to keep my sidebar fixed ...