Changing the background color of a button in AngularJS as the input value gets updated

Currently, the page is in the process of creating an account.

I am looking to change the button background color to gray when one of the inputs does not have a value. Conversely, when all inputs have a value, I want the button background color to be blue.

This is how my code looks:

 <style>
    .create-student-account-box {
        padding:23px;
        width: 752px;
        height: 489px;
        font-family:  'HanHei SC', 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', 'Arial', sans-serif;
        color: #303030;
    }
    .create-student-account-box .create-student-content-box {
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 10px;
    }
    .create-student-account-box .top-box {
        margin: 0 auto;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
    }
    .create-student-account-box .content-box {
        margin-top: 30px;
    }
    (...continues with remaining CSS properties)
</style>

<...HTML structure continues as per original code snippet>

Using Chrome browser and not encountering any errors in the Console. Seeking guidance on troubleshooting this issue.

Answer №1

The syntax you are using for ng-class is incorrect. You should use the following instead:

<button ng-class="{'grey-button-style': is_show_hightlight()}" ng-click="createAccountFun()" class="create-button-style">Create</button>

Check out the demo on JSFiddle.


Note: To invert the condition, simply add a !:

ng-class="{'grey-button-style': !is_show_hightlight()}"

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

Tips for ensuring that a CSS infinite animation slider functions on mobile devices

I'm having trouble getting my price ticker/slider to work properly on mobile devices. It works perfectly on desktop/laptop, but on mobile the ticker items just briefly appear and then disappear without sliding animation. Here is a clip of the bug: Cl ...

Setting up Socket.io results in numerous transport polling GET requests being initiated

I have set up an express.js server-side and followed the socket.io guide. However, I am facing issues with the socket connection not being successful, and there seems to be a high number of unexpected GET requests like this: https://i.stack.imgur.com/GDGg ...

how can I filter an array in MongoDB using a specific condition

This is an example of my MongoDB object: { "_id": ObjectId("asdklfjasdlkfjal"), "geometry": { "type": "Point", "coordinates": [ -26.62375, 152.86114 ] } }, { "_id": ObjectId("asdklfjasdlkfjal ...

Disabling the intellisense feature for locale suggestions in Monaco is recommended

Switch the keyboard language to a different one (in this case Japanese using alt + shift), and when typing in Monaco editor, an intellisense menu appears with options to remove and search. Monaco Editor Version: V0.33.0 https://i.stack.imgur.com/SIyeV.pn ...

I am having trouble reaching the _groups attribute in angular/d3js

I am encountering an issue when trying to access the "_groups" property in my code: function getMouseDate(scale){ var groupElement = d3.select("#group")._groups[0][0] var xCoordinate = scale.invert(d3.mouse(groupElement)[0]); co ...

Perform operations such as addition, subtraction, and comparison of date and time in Meteor Mongo

Currently, I am working with a collection on Meteor Mongo that includes two important fields: last_activity and expire_date. One scenario involves retrieving items from this collection based on their last_activity being N hours in the past. In another si ...

AJAX jQuery requests can flatten arrays when they are sent

The below code shows an endpoint written in Express, using the body-parser middleware. app.post("/api/poll/new",api.NewPoll); api.NewPoll = function(req,res){ if(!req.body) return res.status(400).send("MISSING BODY"); console.log(req.body,typeof(r ...

The menu does not appear when I attempt to right-click on the grid header

Is there a way to add a right-click menu to the grid header? The right-click functionality works on Google links, but not on the grid header. Any suggestions on how to resolve this issue? Below is the code I'm using: http://jsfiddle.net/c7gbh1e9/ $( ...

The crash during compilation is triggered by the presence of react-table/react-table.css in the code

My code and tests are functioning properly, but I am facing a challenge with my react-table file. The react-table.js API specifies that in order to use their CSS file, I need to include import "react-table/react-table.css"; in my react-table.js file. Howev ...

The issue of AngularJS function returning at an incorrect point

Can someone explain to me why my JavaScript function behaves this way? It loops through an array of 3 objects, returning true when meeting a condition in the if statement. However, it does not exit after the first true and continues looping, ultimately ret ...

Reduce the size of the object to improve its readability

My JavaScript object is quite lengthy with over 6000 lines, and I am looking to enhance its readability. In the structure below, you'll notice that there are some common elements shared across all environments ('commonA', 'commonB' ...

Resetting the form and validation in AngularJS post form submission

I need help resetting a form and all validation messages after submission. Check out my code on plunker: http://plnkr.co/edit/992RP8gemIjgc3KxzLvQ?p=preview Here is the code snippet: Controller: app.controller('MainCtrl', function($scope) { ...

Creating a bootstrap carousel configuration

I recently encountered a problem while using a single bootstrap carousel. The carousel contains multiple items/images to display, with one of them needing to be active initially. Below is the code snippet: <div id="myCarousel" class="caro ...

jQuery selector fails to function after retrieving data from an AJAX request

Below is the HTML snippet: <div class="parentDiv"> <div class="childDiv"> <!-- code to insert button here --> </div> </div> And this is the jQuery code: $.ajax({ url : "url.php", type : "POST", d ...

Tips on extracting information from several JSON response objects

I have the following ArrayList: JSONArray JMyDataList= new JSONArray(MyDataList); JSONArray JMyProjectData = new JSONArray(MyProjectData); MyDataList: contains data retrieved from a database with column names and data. response.setConten ...

What is the best way to incorporate new elements into the DOM in order to allow users to share their comments

Can anyone help me with the code below? I have a text box and a comment section, along with a button to add comments. However, I need assistance with adding the posted comment below the comment section. Below is the code snippet: <div id="comments"&g ...

What is the significance of the exclamation point before and after in JavaScript?

Currently collaborating on a project and attempting to decipher the significance of the exclamation marks both before and after. import ICHING from '!json!constants/iching_deoxy.json'; ...

What is the best way to include multiple hostnames and pathnames in a Next.js configuration file for image assets?

My attempt to import multiple images from different hostnames for next/image is not working as expected. In my next.config.js, I have tried the following setup: module.exports = { images: { remotePatterns: [ { protocol: 'https&apos ...

Error encountered: Circular reference issue was encountered when attempting to retrieve navigator.plugins with the use of Selenium and Python

I'm attempting to access the value of navigator.plugins from a Selenium-driven ChromeDriver initiated google-chrome Browsing Context. Using google-chrome-devtools, I am able to retrieve navigator.userAgent and navigator.plugins as shown below: https ...

Is it possible to utilize a single router link to run two forms concurrently within one setup?

I am trying to achieve a specific functionality with my two Angular forms. One form has just two fields, and when I click on one field, it should redirect me to the other form. The second form contains detailed information related to the field from the f ...