How to make input text disabled until edit button is clicked

Question

I have created an edit button and a form. On pageload it self im getting it as a editable 

All I want to do is make input disabled and when the user clicks on the edit button they should be able to edit the text

.

 

<div class="row">

<div class="bs-example marginTop50" data-example-id="table-within-panel">

<div class="panel panel-default">

<div class="panel-body">

<p>

AngularJS Editable Grid Demo

</p>

</div>

<table class="table">

<thead>

<tr>

<th>

FileID

</th>

<th>

File Name

</th>

<th>

Parent Id

</th>

<th>

Type

</th>

<th>

</th>

</tr>

</thead>

<tbody>

<tr ng-repeat="node in List">

<th scope="row">

{{node.FileID}}

</th>

<td>

@*<span>{{node.FileName}}</span>

<input type="text" ng-model="node.FileName" class="form-control">*@

@*<span>{{node.FileName}}</span>*@

<span ng-show="node.showEdit">{{node.FileName}}</span>

<input ng-show="!node.showEdit" type="text" ng-model="node.FileName" class="form-control">

</td>

<td>

@*<span>{{node.ParentID}}</span>

<input type="text" ng-model="node.ParentID" class="form-control">*@

<span ng-show="node.showEdit">{{node.ParentID}}</span>

<input ng-show="!node.showEdit" type="text" ng-model="node.ParentID" class="form-control">

</td>

<td>

@*<span>{{node.Type}}</span>

<input type="text" ng-model="node.Type" class="form-control">*@

<span ng-show="node.showEdit">{{node.Type}}</span>

<input ng-show="!node.showEdit" type="text" ng-model="node.Type" class="form-control">

</td>

@*<td>

<!--Edit + Delete -->

<div ng-show="node.editMode == null || node.editMode == false">

<i class="btn btn-sm btn-grid glyphicon glyphicon-edit" ng-click="toggleEditMode(node)" title="Edit"></i>

<i class="btn btn-sm btn-grid glyphicon glyphicon-trash" ng-click="node.deleteItemWithConfirmation(node)" title="Delete"></i>

</div>

<!--Save + Cancel -->

<div ng-show="node.editMode">

<i class="btn btn-sm btn-grid glyphicon glyphicon-floppy-disk" ng-click="updateItem(node)" title="Save" ng-disabled="node.hasErrors"></i>

<i class="btn btn-sm btn-grid glyphicon glyphicon-remove" ng-click="toggleEditMode(node)" title="Cancel"></i>

</div>

</td>*@

<td>

<span ng-click="toggleEdit(node)" class="btn btn-sm btn-grid glyphicon glyphicon-edit"></span>

<span ng-click="toggleEdit(node)" class="glyphicon glyphicon-ok"></span>

</td>

</tr>

</tbody>

</table>

</div>

</div>

</div>

 

 

myfunction

 

 

 

<script type="text/javascript">

var app = angular.module('app', ['angularTreeview']);

app.controller('treecontroller', function ($scope, $http) {

$http.get('/Home/GetFileStructure').then(function (response) {

$scope.List = response.data.treeList;

});

$scope.toggleEdit = function (node) {

node.showEdit = node.showEdit ? false : true;

//node.showEdit = node.showEdit ? false : false;

}

$http({

method: 'POST',

url: '/Home/GetFileStructure'

})

.then(function (response) {

console.log(response);

$scope.List = response.data.treeList;

angular.forEach($scope.List, function (obj) {

obj["showEdit"] = true;

})

}, function (error) {

console.log(error);

});

});

</script>