AngularJs set variable in view : The ng-disabled directive is used to enable-disable the buttons in angularjs. We sometimes need the enable-disable functionality in AngularJs. There are many ways to Add the enable-disable toggle functionality. Here we are going to explain the simplest one. You can use our online editor to edit and run the example code.
Angularjs enable disable button | Example
Let us go step by step to create the enable-disable functionality using the angularjs ng-disabled directive. You can the enable-disable functionality in angularJs as below
Html Part
Html Part Contains the following htmls –
Angularjs enable disable button | Example:
<div ng-app="myApp">
<div ng-controller="myController">
<button ng-disabled="myBtn" ng-model="myBtn" ng-click="enableDisableButton()">{{demoButton}}</button>
</div>
</div>
|
The above part will create the simple button which will be used to add the enable-disable functionality using the following javascript –
JavaScript Part
The JavaScript Part Contains the following script as below –
Angularjs enable disable button | Example:
|
|
Complete Part
Now let us combine both part javascript and html to create full example –
Angularjs enable disable button | Example:
<div ng-app="myApp">
<div ng-controller="myController">
<button ng-disabled="myBtn" ng-model="myBtn" ng-click="enableDisableButton()">{{demoButton}}</button>
</div>
</div>
|
If you run the above example it will produce output something like this –