Enable/Disable button from controller on Angularjs

Question

I have an HTML button option as the following,

<button ng-class="{'primaryButton':true}" type="button" id="modalCreateBtn" "ng-hide="false" class="btn btn-group mm-btn-save primaryButton" ng-click="addSegments()">CREATE</button>

There is no ng-disable option in the above button option. Is this possible to enable/disable button with buttonId on controller? Also, I dont want to add disable option on HTML view. Instead I want to control it via scripts. Is this possible?

@Zee yesm because my input is exactly like the above. calling above button format for all buttons in my application. — Pez
– Pez, Commented Jun 2, 2015 at 13:07
Why are you including ng-class="{'primaryButton':true}" ...primaryButton would always be a class applied to the button in this case and, more importantly, it is already a part of the class attribute — Kabb5
– Kabb5, Commented Jun 2, 2015 at 14:43
Also...unless you re-wrote your code wrong when posting this question, you need to fix your quotes here: "ng-hide="false" — Kabb5
– Kabb5, Commented Jun 2, 2015 at 14:43
You should really just change the buttons to include ng-disabled as suggested by @Zee and @Gabriel Kohen — Kabb5
– Kabb5, Commented Jun 2, 2015 at 14:46

Gabriel Kohen · Accepted Answer · 2015-06-02 14:41:23Z

15

Have you looked into ngDisable? You can have an ngModel and change it from the controller. Like the documentation example says here:

<span  ng-controller="MyController as myController">
  <label>Click me to toggle: <input type="checkbox" ng-model="myController.checked"></label><br/>
  <button ng-model="button" ng-disabled="myController.checked">Button</button>
</span>

And the JS:

angular.module('controllerAsExample', [])
  .controller('MyController ', function(){
      this.checked = false;
 //   this.checked = true;
  });

edited Jun 2, 2015 at 14:41

answered Jun 2, 2015 at 12:52

Gabriel Kohen

4,3264 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alhuck · Accepted Answer · 2015-06-02 13:18:44Z

12

Using ng-disabled is the best practice to enable/disable a button, but you can also achieve it in the controller without adding disabled property to your HTML view with this scripts,

angular.element(document.getElementById('yourButtonId'))[0].disabled = true;

In your case,

angular.element(document.getElementById('modalCreateBtn'))[0].disabled = true;

Plunker

Hope this helps!

edited Jun 2, 2015 at 13:18

answered Jun 2, 2015 at 13:13

Alhuck

1,0298 silver badges11 bronze badges

1 Comment

otgw Over a year ago

Wouldn't work for me, which was baffling because it works on Plunker. Looked at angular.element doc - "If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or "jqLite." So for people who are not using JQuery, .disable is not a method in jqLite. What worked for me was .attr('disabled', true) because .attr() is a method in jqLite,

tyne · Accepted Answer · 2019-04-03 09:01:46Z

0

Have you tried using ng-if ?

Controller :

$scope.setUploadMode = function (stats) {
    if (stats == 4) {

        $scope.selectMe = false;

    } else { alert("No"); $scope.selectMe = true;  }
};

$scope.hello = function () {
    alert("YEY");
};

HTML :

div class="radio">
<label>
    <input type="radio" name="appendCreateMode" ng-disabled="uploadMode != 2" ng-click="setUploadMode(4)" />Append Folder
</label>
</div>
<button ng-model="button" ng-disabled="selectMe" ng-click="hello()">Button</button

answered Apr 3, 2019 at 9:01

tyne

1156 bronze badges

Collectives™ on Stack Overflow

Enable/Disable button from controller on Angularjs

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest