AngularJs update table row
home
Run
screen_rotation
fullscreen
cloud_download
<!DOCTYPE html> <html lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/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'}, {'id':101, 'name':'Kat','country':'Serbia'}, {'id':190, 'name':'Yesha','country':'Srilanka'}, {'id':189, 'name':'Robert','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 style='color:green;font-weight:bold;'>{{message}}</span> <table style="width:380px;"> <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> <style> table input{ max-width:120px; } </style> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/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'}, {'id':101, 'name':'Kat','country':'Serbia'}, {'id':190, 'name':'Yesha','country':'Srilanka'}, {'id':189, 'name':'Robert','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 style='color:green;font-weight:bold;'>{{message}}</span> <table style="width:380px;"> <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> <style> table input{ max-width:120px; } </style> </body> </html>
Copyrights@tutorialsplane.com