Search code examples
angularjsinputdisabled-input

After enabling disabled (disabled using ng-init and enabled by button click) text input box default input box value not showing in angularjs

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
  </script>

  <head>

    <body>
      <div ng-app="">
        <label class="control-label"> Name:</label>
        <div class="input-group col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <input type="text" class="form-control" ng-model="name" ng-disabled="bname" ng-init="bname=true;" value="Default Value">
          <span class="input-group-addon">
    <a ng-click="bname=!bname" title="Click here to Change your name">
    <span class="glyphicon glyphicon-edit"></span></a>
          </span>
        </div>
      </div>
    </body>

</html>

After enabling disabled (disabled using ng-init and enabled by button click) text input box default input box value not showing in angularjs, can any one got to do this? Any kind of help is appreciated, cause I am new to ng. w3c example: w3schools.com tryit editor

Solution

  • Initialize angular property "name" using ng-init removing value attribute as shown below: 

      <input type="text" class="form-control" ng-model="name" 
      ng-disabled="bname" ng-init="bname=false; name='default value'" >