Angularjs enable disable button
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:
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope,$timeout) {
$scope.myBtn = false;
$scope.demoButton = "Demo Button";
$scope.enableDisableButton = function() {
$scope.myBtn = true;
$scope.demoButton = "Please Wait....";
//do your stuffs Such as get data from ajax
//...
//...
// We are using timeout for this example as
// we are not using ajax or some other activity.
// Note $timeout service must be imported for using timeout.
$timeout(function () {
$scope.demoButton = "Demo Button";
$scope.myBtn = false; // enable button after 3 seconds.
}, 3000);
};
});
</script>
|
Complete Part
Now let us combine both part javascript and html to create full example –
Angularjs enable disable button | Example:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope,$timeout) {
$scope.myBtn = false;
$scope.demoButton = "Demo Button";
$scope.enableDisableButton = function() {
$scope.myBtn = true;
$scope.demoButton = "Please Wait....";
//do your stuffs Such as get data from ajax
//...
//...
// We are using timeout for this example as
// we are not using ajax or some other activity.
// Note $timeout service must be imported for using timeout.
$timeout(function () {
$scope.demoButton = "Demo Button";
$scope.myBtn = false; // enable button after 3 seconds.
}, 3000);
};
});
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<button ng-disabled="myBtn" ng-model='myBtn' ng-click='enableDisableButton()' >{{demoButton}}</button>
</div>
</div>
</body>
</html>
|
If you run the above example it will produce output something like this –
Advertisements
