LearnKode

8 Example(s) of Ng-Readonly


Description :

When we click on the checkbox its value bind to open variable which will assign to ng-readonly directive then textbox become readonly.


Ng-Readonly 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>
        <label>Check me : <input type="checkbox" ng-model="open"></label><br />
        Name:<input ng-readonly="open" type="text" ng-model="name">
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this either of two textbox become readonly on the basis of checkbox value because its value bind to open variable.


Ng-Readonly 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>
        <label>Readonly Last Name field : <input type="checkbox" ng-model="open"></label><br />
        First Name:<input type="week" ng-readonly="!open" /><br />
        Last Name:<input type="week" ng-readonly="open" />
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

There are list of options of fields array of object.On the basis of selected value we can enable that particular input field active.But by default all input fields are readonly because novalue is selected from dropdownlist.


Ng-Readonly 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="app">
    <div ng-controller="controllerName">
        Read field : <select ng-model="fieldname" ng-options="p.name as  p.name for p in fields"></select><br /><br />
        Date:<input ng-readonly="fieldname!='Date'" type="date" ng-model="name2"><br />
        Time:<input ng-readonly="fieldname!='Time'" type="time" ng-model="name1"><br />
        Month:<input ng-readonly="true && fieldname!='Month'" type="month" ng-model="name4"><br />
        Week:<input ng-readonly="fieldname!='Week'" type="week" ng-model="name3">
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.fields = [{ name: 'Date' }, { name: 'Time' }, { name: 'Month' }, { name: 'Week' }];
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

We can enable the email textbox when we select the current date which is bind to date variable and pass as parameter in calculation(date) function which is called on ng-change directive.


Ng-Readonly 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="app">
    <div ng-controller="controllerName" ng-init="name='[email protected]'">
        <label>Read email field (range should greater then 70): <input type="range" ng-model="rg" ng-change="calculation(rg)"></label><br />
        Email:<input ng-readonly="!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 :

We can disable the month textbox when checkbox is checked because true value is bind to open variable which assigns to ng-readonly directive and vice versa.


Ng-Readonly 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>
    <div>
        <label>Disable month field : <input type="checkbox" ng-model="open"></label><br />
        Month:<input ng-readonly="open" type="month" ng-model="month">
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

We can disable the numeric textbox when checkbox is checked because true value is bind to open variable which assigns to ng-readonly directive and vice versa.


Ng-Readonly 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>
        <label>Disable month field : <input type="checkbox" ng-model="open"></label><br />
        Month:<input ng-readonly="open" type="number" ng-model="number">
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

Ng-Readonly-7


Ng-Readonly 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>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <style type="text/css">
        .control-label {
            text-align: left !important;
        }
    </style>
</head>
<body ng-app="app">
    <div ng-controller="myController">
        <div class="container">
            <div class="row form-horizontal">
                <div class="col-md-offset-3 col-md-6 well">
                    <div class="row form-group">
                        <div class="col-md-8 control-label"><h4><span class="label label-info label-md">You can update status only</span></h4></div>
                        <div class="col-md-4">
                            <br />
                            <button class="btn btn-primary" ng-click="edit=true">Edit</button>
                            <button class="btn btn-success" ng-init="edit=false" ng-click="edit=false">Update</button>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-4 control-label">Customer Name</div>
                        <div class="col-md-8"><input ng-readonly="true" class="form-control" type="text" value="J Morries" /></div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-4 control-label">Order Total</div>
                        <div class="col-md-8"><input ng-readonly="true" class="form-control" type="text" value="$550" /></div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-4 control-label">Status</div>
                        <div class="col-md-8"><select class="form-control" ng-disabled="!edit" ng-init="status=1" ng-model="status" ng-options="s.id as s.Status for s in statusddl"></select></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var app = angular.module("app", []);
        app.controller('myController', ['$scope', function ($scope) {
            $scope.statusddl = [{ id: 1, Status: 'Pending' },
                { id: 2, Status: 'Shipped' },
                { id: 3, Status: 'Delivered' }];
        }]);
    </script>
</body>
</html>
Try it » Download Example »

Output

Description :

Ng-Readonly-8


Ng-Readonly 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>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <style type="text/css">
        .control-label {
            text-align: left !important;
        }
    </style>
</head>
<body ng-app="">
    <div class="container">
        <div class="row form-horizontal">
            <div class="col-md-offset-3 col-md-6 well">
                <div class="row form-group">
                    <div class="col-md-12 text-right" ng-init="otp=true">
                        <button class="btn btn-primary btn-xs" ng-click="otp=true">By OTP</button>
                        <button class="btn btn-success btn-xs" ng-click="otp=false">By Secure PIN</button>
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-4 control-label">Name On Card</div>
                    <div class="col-md-8"><input ng-readonly="!otp" class="form-control" type="text" /></div>
                </div>
                <div class="row form-group">
                    <div class="col-md-4 control-label">ATM Number</div>
                    <div class="col-md-8"><input ng-readonly="!otp" class="form-control" type="text" /></div>
                </div>
                <div class="row form-group">
                    <div class="col-md-4 control-label">A/C Number</div>
                    <div class="col-md-8"><input ng-readonly="otp" class="form-control" type="text" /></div>
                </div>
                <div class="row form-group">
                    <div class="col-md-4 control-label">CVV</div>
                    <div class="col-md-8"><input ng-readonly="!otp" class="form-control" type="text" /></div>
                </div>
                <div class="row form-group">
                    <div class="col-md-4 control-label">ATM PIN</div>
                    <div class="col-md-8"><input ng-readonly="otp" class="form-control" type="text" /></div>
                </div>
                <div class="row form-group">
                    <div class="col-md-4 control-label">Secure Password</div>
                    <div class="col-md-8"><input ng-readonly="otp" class="form-control" type="text" /></div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12 text-right">
                        <button class="btn btn-success btn-xs" ng-show="otp">Send OTP On Mobile</button>
                        <button class="btn btn-success btn-xs" ng-show="!otp">Payment</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output