CODEWITHSUNDEEP
javascripthtmlangularjsbuttondisabled-control
user3871
user3871

Reputation: 12716

angular ng-disable not working as expected

I'm trying to disable a button from a controller when a directive emits a ready status.

I'm passing in a boolean to ng-disabled:

<button ng-disabled="{{pointsClaimed}}" ng-click="playVideo()">{{buttonText}}</button>

My controller: 

    $scope.buttonText = 'Watch Video to Claim Points';
    $scope.pointsClaimed = false;

    $scope.$on('pointsClaimed', function(){
        $scope.buttonText = 'Points Claimed!';
        $scope.pointsClaimed = true;
    });

I can see that the button is changing from false to true:

enter image description here

enter image description here

But the actual button isn't being disabled.

If I hardcode in true or false, it works as expected. If the value is changing as expected in the HTML, why isn't the button being disabled?

Upvotes: 0

Views: 1058

Answers (1)

Matt Herbstritt
Matt Herbstritt

Reputation: 4862

Don't think you need the curly brackets. Try..

<button ng-disabled="pointsClaimed" ng-click="playVideo()">{{buttonText}}</button>

Demo

Also a good demo in the docs.

Upvotes: 5

Related Questions