How to use ng-style with !important?

Question

Tag Button already has cursor css assigned. I want to override cursor css according to is_active values to disable button. is_active may have values 0 or 1. Following is code for js/html please let me know correct method to apply cursor css to button.

$scope.ngStyleDisabled = function(status) {
  if (status == 1) {
    return {};
  } else if (status == 0) {
    return '{\'cursor\':\'not-allowed !important\',\'pointer-events\':\'none\'}';
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<button ng-style="{{ngStyleDisabled(item.is_active)}}">Action Button</button>

Solution 1

ng-style does not support !important.

So alternate is to use ng-class instead of ng-style, it will solve the problem.

If you want to use ng-style specifically then try to write within html itself- please don't try to write within any function.

Solution 2

Spoiler alert: everyone who said ng-style does not support !important is *WRONG!!

*Well, sort of wrong. I.e. while it definitely isn't supported out of the box, you can force it with the following workaround (simplified here for convenience):

<elem data-ng-attr-style="{{ 'color: ' + your_color_var + ' !important' }}"></elem>

e.g.

<span data-ng-attr-style="{{ 'color: indigo !important' }}"></span>

Wait... so we have to use a hack to get !important working!?! That's like... a double hack!!! Or a double double cross!! A triple cross?!?

Lol.

Solution 3

According to the documentation your expression needs to be an object:

Expression which evals to an object whose keys are CSS style names and values are corresponding values for those CSS keys.

Try returning an object instead of the string (using quoutes since the CSS properties might not be valid keys):

$scope.ngStyleDisabled = function(status) {
  if (status == 1) {
    return {};
  } else if (status == 0) {
    return {
      'cursor': 'not-allowed', // !important does not work in ng-style
      'pointer-events': 'none'
    };
  }
}

Also, leave out the curly braces in your template:

<button ng-style="ngStyleDisabled(item.is_active)">Action Button</button>

This JSFiddle shows how the properties are applied to the button.

NOTE According to this question and this GitHub issue, the !important keyword is not supported within the ng-style directive. You can find workarounds behind the links.

Comments

[Nishant]

tried your code which returned result as <button ng-style="{"cursor":"not-allowed !important","pointer-events":"none"}">Action Button</button>

[muenchdo]

Is that not what you wanted?

[Nishant]

This returned values with double quotes not in single quotes.

[muenchdo]

If you check the JSFiddle you can see that the properties are applied to the button as you requested. What is the issue?