LearnKode

9 Example(s) of Ng-Disable


Description :

In this example of the ng-disabled directive we have a textbox and upon the textbox we have a link toggle when you click on this it will disable the textbox and the link below the textbox both, click again to make both enable.


Ng-Disable Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div ng-init="count=1;inactive=false">
        <a ng-click="inactive = !inactive" href="">Toggle Active</a>
        Disable={{inactive}}
        <br><input type="number" ng-disabled="inactive" ng-model="count">
        <br><a ng-click="inactive || (count=count + 1)" href="" style="">click to Increase count</a> {{count}}
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we have a button and a anchor link. When you click on the Anchor link it will show Anchor clicks below it and when you click on the button it will show the button clicks. We have a checkbox to disable the button clicks when the checkbox is checked the button will disable.


Ng-Disable Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <h4>Click me to toggle: <input type="checkbox" ng-model="isChecked"></h4>
        <a href="" ng-disabled="isChecked" ng-click="anchorClicks=anchorClicks+1">ANCHOR</a>
        <button ng-disabled="isChecked" ng-click="buttonClicks=buttonClicks+1">BUTTON</button>
        <hr />
        <p>Anchor Clicks: {{anchorClicks}}</p>
        <p>Button Clicks: {{buttonClicks}}</p>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we have two buttons start and stop. Initial Start button is enable and stop button is disable, when you click on the start button the stop button is gets enable and start button will disabled.


Ng-Disable Example - 3 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <input ng-disabled="isDisabled" type="button" ng-click="isDisabled=!isDisabled" value="Start" />
        <input ng-disabled="!isDisabled" type="button" ng-click="isDisabled=!isDisabled" value="Stop" />
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we have two textboxes when you type in the first textbox the second textbox will disable and when you clear the first textbox then second textbox agian gets enable.


Ng-Disable Example - 4 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        Name: <input type="text" ng-model="isDisabled" />
        <input type="text" ng-disabled="isDisabled" />
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we have range and email field disabled by default. The email field will enable only when you exceed the range greater than 70.


Ng-Disable Example - 5 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName" ng-init="name='[email protected]'">
        <label>Enable email field (range should greater then 70): <input type="range" ng-model="rg" ng-change="calculation(rg)"></label><br />
        Email:<input ng-disabled="!isEnable" type="email" ng-model="name">
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.calculation = function (rg) {
            $scope.isEnable = rg > 70 ? true : false;
        }
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example of ng-disabled directive we have a textbox of email type and if you type invalid email in this textbox the submit button will disable and gets enable when you type valid email in the textbox.


Ng-Disable Example - 6 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div ng-init="name='[email protected]'">
        <form name="myForm">
            <label>Email</label>
            <input type="email" name="name" ng-model="form.name">
            <input type="submit" ng-disabled="!myForm.name.$valid">
        </form>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we have a checkbox for new user and when the checkbox is checked the accept terms and conditions with yes and no option shows and if you accept then the register button gets enable otherwise disable.


Ng-Disable Example - 7 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <div>
            <label>New User?</label>
            <input type="checkbox" ng-model="isHide" />
        </div>
        <div ng-show="isHide">
            <label>Accept Terms and Conditions</label>
            <input type="radio" value=true name="bool" ng-model="termAndCond" ng-change="isDisabled=!isDisabled" /><label>Yes</label>
            <input type="radio" value=false name="bool" ng-model="termAndCond" ng-change="isDisabled=!isDisabled" /><label>No</label>
        </div>
        <div>
            <input type="submit" value="Login" ng-disabled="isHide ">
            <input type="submit" value="Register" ng-show="isHide" ng-disabled="!isDisabled">
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we have a button "Disable" when you click on this button, the button will disable and a new button with text "Enable" shows when you click on the Enable button the "Disable" button gets enable and "Enable" button will hide.


Ng-Disable Example - 8 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName" ng-init="isDisabled=false">
        <button ng-click="disableClick(isDisabled)" ng-disabled="isDisabled">Disable</button>
        <button ng-click="disableClick(isDisabled)" ng-show="isDisabled">Enable</button>

    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.disableClick = function (isDisabled) {
            $scope.isDisabled = !isDisabled;
        }
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example of ng-disable directive we have two checkboxes one for application form and other for id proof if both are checked then you can activate internet banking means the the button "Active Internet Banking" will only enable if both the checkboxes are checked.


Ng-Disable Example - 9 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <h3>Application Form <input type="checkbox" ng-model="check" /></h3>
        <h3>Id Proof<input type="checkbox" ng-model="check2" /> </h3>

        <br />
        <button type="button" ng-disabled="!(check && check2)">Activate Internet Banking</button>
        
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.disableClick = function (isDisabled) {
            $scope.isDisabled = !isDisabled;
        }
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output