TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Sujeet Raman
859
927
351.8k
How to make input text disabled until edit button is clicked
Jun 7 2017 3:19 AM
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>
Reply
Answers (
1
)
How to call controller function from another controller
How to share data between two controllers