1
Answer

How to make input text disabled until edit button is clicked

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>
 
 
 

Answers (1)