Menu ▼



Posted By :
avatarmrkraju
Total Views : 1593

AngularJS ng-disabled example

AngularJS ng-disabled directory is used to disable the controls. It will disable the element based on the return value of given {expression}. Below example will disable button, fieldset and all controls in fieldset when the check box selected by adding disabled attribute and re-enable elements when the checkbox unselected.

Example
Below example will disable the button control whent the checkbox selected.





Below example will disable the fildset and all controls in the fildset(login controls)


User Name:


Password:


Source code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCntrl">
        <input type="checkbox" ng-model="disablebtn" id="chbbutton" name="chbbutton" />
        <label for="chbbutton">
            Select this checkbox to disable the below button</label>
        <br />
        <br />
        <input type="button" value="Disable Example" ng-disabled="disablebtn" />
        <br />
        <br />
        <input type="checkbox" ng-model="disablefldset" id="chbfldset" name="chbfldset" />
        <label for="chbfldset">
            Select this checkbox to disable the fieldset and all controls</label>
        <br />
        <br />
        <fieldset ng-disabled="disablefldset">
            User Name:
            <br />
            <input type="text" />
            <br />
            <br />
            Password:
            <br />
            <input type="text" />
            <br />
            <br />
            <input type="button" value="Login" />
        </fieldset>
    </div>
    <script language="javascript">
        var myapp = angular.module("myApp", []);
        myapp.controller("myCntrl", function ($scope) {
            $scope.disablebtn = false;
            $scope.disablefldset = false;
        });
    </script>
</body>
</html>






comments powered by Disqus


Search dotnetlearners.com