Ng-Readonly-8

 

Ng-Readonly-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>
Output