button that is always enabled regardless of ng-disabled

Trying to control the functionality of my Save button with ng-disabled:

<button type="button" title="Save Changes" ng-click="onSaveChanges()"
        ng-disabled="{{!data.modified}}">
  Save
</button>

I am using a $scope.data.modified variable that changes to true when my data is modified. However, even when this variable toggles between true and false, the Save button remains enabled. Upon inspecting the element, I see that ng-disabled switches between "true" and "false" as expected, but the button does not reflect this change.

javascriptangularjsbutton

Answer №1

When incorporating an AngularJS attribute such as ng-show, ng-hide, or ng-disabled, it is important to use camel case notation. For example, ng-disabled="!data.modified". However, for regular attributes like class and id, the snake notation should be utilized. For instance, 

class={{aVaribaleinControllerScope}}

Answer №2

Upon inspecting the element, it is noticed that the ng-disabled attribute toggles between "true" and "false" as expected, but the button remains enabled.

To resolve this issue, simply remove the double curly brackets ({{ }}) from the Angular expression:

<button type="button" title="Save Changes" ng-click="onSaveChanges()"
        ng-disabled="!data.modified">
  Save
</button>

The presence of double curly brackets converts the Angular expression into a string. In JavaScript, the string "false" is considered truthy, resulting in both "true" and "false" being evaluated as truthy values, thus keeping the button always enabled.

Directives requiring boolean values will not function properly in this scenario.

For further information, refer to Why mixing interpolation and expressions is bad practice.

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

Strip away all HTML attributes within a string

I am in the process of developing an internal tool that allows a designer to input exported svg code into a text area and have the html code displayed in a syntax highlighter () When they paste their code like this <svg xmlns="http://www.w3.org/20 ...

javascriptregexstringvue.js

Issues arise when attempting to determine the accurate dimensions of a canvas

Looking at my canvas element: <canvas id='arena'></canvas> This Element is set to fill the entire website window. It's contained within a div Element, both of which are set to 100% size. I attempted running this script: var c ...

javascripthtmlcsscanvaselement

Send data to colorbox within the current webpage

Hey everyone, I could really use some assistance here, I am trying to figure out how to pass the Data-id value to a Color Box Popup. Can anyone guide me on what steps I need to take? Alternatively, is there another method to achieve the same outcome? JS ...

javascriptphpjquerymysqlajax

Can the operator pipeline generate interim observables in a manner akin to how filter, map, and reduce generate interim arrays?

I need some clarification regarding the efficiency of operator pipelines in RxJS. Based on my current understanding, each operator within the pipeline receives an observable and generates a new (potentially modified) observable to pass on to the next oper ...

javascriptrxjsobservablepipeline

What sets apart client-side authentication from server-side authentication?

While there is Passport available for Node.js, Sattelizer is the choice for AngularJS. I find it challenging to determine when each should be used. What are the unique features of Sattelizer compared to Passport and vice versa? How does JSON Web Tokens im ...

angularjsnode.jsexpresspassport.js

Exploring the concept of looping through an array of JSON objects using AngularJS

I am working with a JSON object and my goal is to extract specific information to be displayed using console.log in the browser. FROM: Frontier WHSE, TO: ENTEC POLYMERS The JSON object structure is as follows: { "loadStops": [{ "id": 1, ...

arraysangularjsjson

Creating a callback function within its own definition

I need help with my download function that is calling a callback to "downloadCallback". Is it possible to define the downloadCallback function inside the download function itself? If so, how can I achieve this? Below is the implementation of the download ...

javascriptangularblobgojs

apply jQuery to add a class to the parent element when clicked

I am currently facing an issue with my code. It was working fine in jsFiddle, however, when I try to use it outside of fiddle, I am getting errors and it's not working properly. $('.down-photo').click(function() { $(this).parent(&apos ...

javascriptjqueryhtmlcss

Ordering Operations in Redux

Right now, I'm facing a situation where I need Redux Actions to run one after the other in sequence. I've come across different middlewares like redux-promise that work well if you know the successive actions when triggering the root action. My ...

javascriptreactjsredux

Encountering issues with gulp-angular-templatecache while processing angular templates through pipelining

I've encountered an issue with gulp-angular-templatecache in my gulpfile. Here's the task causing trouble: gulp.task('templates', function() { return gulp.src(paths.angularTemplates) .pipe(templateCache()) ...

javascriptangularjsnpmgulp

Executing command prompt using Javascript

As a newcomer to stackoverflow, I am facing an issue with my asp.net web application. In one of the web forms, I need to execute cmd.exe from JavaScript on the server side after clicking a button. function onRec(){ try{ var commandtoRun = "c:\\W ...

javascriptasp.netwindowsbatch-filecmd

Utilize JavaScript code with AJAX content without repeated inclusion

My index.php file allows users to input day, month, year, and more. Using ajax, I dynamically display the results. $(document).ready(function() { $('#searchBtn').click(function() { $.ajax({ url: &a ...

javascriptphpjqueryajaxhtml

Retrieve specific information from a nested JSON structure and combine it into a unified array

I am struggling to extract specific data from the JSON below and add them to a single array. I have managed to extract all the text values inside the block, but I am facing difficulty in pushing it to a single array. The code snippet I used for extraction ...

javascriptnode.jsarraysjsontext-extraction

I am unable to get the radio button checked in Angular 2

I have set up a form with two radio buttons for gender selection, and I want to ensure that the previously selected option is displayed as checked. Here's the code snippet I've added in my template: <div class="form-group"> <label& ...

javascriptjqueryangular

Is there a way to dynamically call an Ember component using a variable?

Imagine having an array of widget objects stored in your controller, with each widget object containing a member variable assigned the name of a component class. How can you make your template call upon that specific component? //widgets[0].widget.compone ...

javascriptember.js

Error retrieving html data from Vercel server when using React

In my current project using Reactjs and the nextjs framework, I am having a strange issue. The HTML content (description_front) is displaying data perfectly fine in my localhost environment. Here is the API response shown in the console: Object id: "55" de ...

javascriptnode.jsreactjsnext.jsvercel

Passing retrieved REST data from service file to AngularJS controller

Hey everyone, I'm new to angular js and running into an issue with sending data from my service file to the controller, which is then supposed to be displayed in my HTML. Could someone please provide some guidance on how to solve this problem? Thank y ...

javascriptangularjsweb-servicesangularjs-serviceangularjs-controller

Encountering the issue: receiving an error message stating that shuffle(...) is undefined within

Whenever I try to add it into the app.js file, it keeps coming up as undefined. app.js (function () { var tkcApp = angular.module('TKC', []); var shuffle = function (o) { for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = ...

javascriptangularjsundefined

Is there a way for rainyday.js to utilize a CSS background image as its background?

I have a simple website with a fixed, full-sized background set using CSS. I am trying to incorporate rainyday.js to create a rain effect over the entire site, including the text. Currently, I am only able to get rainyday.js to display rain over a small s ...

javascriptjqueryhtmlcss

Tips for inserting a DIV and SCRIPT from a single HTML template into a webpage

I'm working with an HTML template that contains a DIV with a button and a script with a function to call when the button is clicked: <div id="CLC_Form"> various text and checkbox inputs go here... <br> <input type="button" ...

javascriptjqueryhtml