AngularJS Edit Table Row Onclick
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Ashish
In this tutorial we will show you the solution of angularjs edit table row onclick, we created json array format of some user information like so we can change as per our own choice.
Those datas are printed on html table with edit option so we can edit them and also we can save them.
We achieve this by using ng-template element and copy() method. Ng-template give access to edit template and our edited values copy to current values by copy().
Step By Step Guide On AngularJS Edit Table Row Onclick :-
In application we used using ng-template element and copy() method for edit table values when user clicks on button by onclick in angularjs.
Ng-template is an angular element that is used for rendering HTML in a template.
However it is not rendered directly on DOM. If you include an ng-template tag to a template, the tag and the content inside it will be replaced by comment upon render.
The copy function takes an object, array or a value and creates a deep copy of it. So we can take copy of edited values and replaced on template too easily.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Edit table row onclick</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
$scope.editablerow = '';
$scope.rows = [{'id':11, 'name':'John','country':'USA'}, {'id':10, 'name':'Kelly','country':'Australia'}, {'id':1, 'name':'Rimmy','country':'India'}];
$scope.editContent = function(content) {
$scope.editablerow = angular.copy(content);
}
$scope.loadTemplate = function(content) {
if (content.id === $scope.editablerow.id) return 'edit';
else return 'view';
}
$scope.saveData = function (indx) {
$scope.rows[indx] = angular.copy($scope.editablerow);
$scope.reset();
};
$scope.reset = function(){
$scope.editablerow = [];
}
});
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<span>{{message}}</span>
<table>
<tr><th>Name</th><th>Country</th></tr>
<tr ng-repeat="content in rows" ng-include="loadTemplate(content)">
</tr>
</table>
<script type="text/ng-template" id="view">
<td>{{content.name}}</td><td>{{content.country}}</td>
<td>
<button ng-click="editContent(content)">Edit</button>
</td>
</script>
<script type="text/ng-template" id="edit">
<td><input type="text" ng-model="editablerow.name" /></td>
<td><input type="text" ng-model="editablerow.country" /></td>
<td>
<button ng-click="saveData($index)">Save</button>
<button ng-click="reset()">Cancel</button>
</td>
</script>
</div>
</div>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- This file contains angularjs is distributed as a javascript file and added to webpage must added by using <script> tag.
- In controller scope our application stored to variable ‘myApp’ and added with controller ‘myController’ function defined $scope object as parameter.
- Editablerow variable initialized with null string and array ‘row’ has four set of associative array create keys are (id,name,country) with respective different values. Here we defined three types of functions.
- First function had content as parameter here it takes content copy stored to editablerow then final result stored to ‘editcontent’.
- Next function checks content id with editablerowid if this is same returns ‘edit’ otherwise it returns ‘view’ those result stored to ‘loadTemplate’.
- Finally in save function with parameter index here we copied content stored to that row of index and reset() called for reset the editablerow array as empty so we can asscess another row without affecting result of other row values in table.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contains coding of entire website blocks and elements described here.
- Within a <div> tag we defined our ng-app namely ‘MyApp’ it defines our application and controller of application namely ‘MyController’ by ng-controller directive.
- Inside of <div> tags we defined table with headers ‘Name,Country’ after that next rows needs to fill with array values so we used ng-repeat directive for iterate once per items in our array.
- Within columns we printed name, country of array values by using double curly braces lastly we created edit button for each row in table.
- Using two <script> tags we defined ‘ng-template’ with different attribute namely ‘view,edit’. In view script we called editContent() with content array values as parameter.
- In edit script template we collecting content values of column by ng-model with two buttons one is save another Cancel button.
- Save button calls ‘saveData()’ function with row index as parameter passed and cancel button has reset() calls it remain as empty array that means no changes we needs to do.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to edit table row values in angularjs.
When we executing angularjs file some of those needs internet connection because we used some external library supports so we need to use internet connection when you’re facing problems.
After execution this program printed on table with edit option in each row.
When user clicks on edit button it takes current values as a copy after filled new values on table row when user clicks on save button current values stored on respective id of content.
So our result will after modification we can easily save on same template.
I hope this tutorial on angularjs edit table row onclick helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
