Using ng-disabled button is still disabled even if value in condition changes

Question

I have a button:

<button ng-disabled="ctrl.myService.getData().someProperty ? '' : 'disabled'">
  Click me!
</button>

When the application loads someProperty does not exist on ctrl.myService.getData(). So the button is disabled.

But after a few seconds someProperty is set on ctrl.myService.getData() but my button is still disabled .. any idea why its not enabling the button based on the new property?

You have to use boolean operators to trigger ng-disabled. Check https://stackoverflow.com/questions/45349719/using-ternary-operator-in-angularjs-to-set-an-attribute-on-an-element/45349944#45349944 — Vivz, Jul 27 '17 at 13:20
Possible duplicate of [Using ternary operator in angularjs to set an attribute on an element](https://stackoverflow.com/questions/45349719/using-ternary-operator-in-angularjs-to-set-an-attribute-on-an-element) — Vivz, Jul 27 '17 at 13:22
It is because the value you have to set in your controller. Probably while check ctrl.myService.getData() might not have resolved — Vivz, Jul 27 '17 at 13:24

Gaurav Srivastava · Answer 1 · 2017-07-27T13:23:16.117

1

it should be like this:

In your controller:

     <script>
        app.controller("myCtrl", function($scope) {

           $scope.is_disabled = ctrl.myService.getData().someProperty;
        });
     </script>

In Html:

    <button ng-disabled="is_disabled ? false : true">
      Click me!
    </button>

edited Jul 27 '17 at 13:23

answered Jul 27 '17 at 13:18

Gaurav Srivastava

3,232
3
16
36

using true or false, the value still doesn't change .. it always remains in the original state i.e disabled – bobbyrne01 Jul 27 '17 at 13:22

score 0 · Accepted Answer · answered Jul 27 '17 at 13:23

0

Also be sure to call $scope.apply() at the end of your methods execution so it can apply the changes necessary

answered Jul 27 '17 at 13:23

Greg Rebisz

156
7

Using ng-disabled button is still disabled even if value in condition changes

2 Answers2