Ng-Readonly-7

 

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