How to update data copy in next table using angular js

Question

Hi i m using in my project a simple functionality.

i have a table and some data is fetch data in json file .

Data is coming and if i click to name than edit mode is on if i blur than hide the edit mode and show the view mode is fine i have do this .

now i have a update button if i click to this button than only updated data in insert next row how to do this please check to this and help me .

My code is this

var myApp = angular.module('myApp', []);
myApp.controller('myCntrl', function($scope, $http){
	$http.get('js/list.json').success(function(data){
		$scope.emplyeList = data;
	});  	 


	$scope.updateSec= function(employe){
		alert("Rohit");
	}
});

.click{

  		cursor: pointer;
  		text-decoration: underline;
  	}
  	.normal-table{
  		width: 50%;
  		border-collapse: collapse;
  	}
  	.normal-table th{
  		border: solid 2px rgba(0,0,0,0.1);
  	}

  	.normal-table td{
  		border: solid 2px rgba(0,0,0,0.1); 
  		text-align: center;
  		padding: 10px 0;
  	}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCntrl">

 
 <body>

 	<table class="normal-table">
		<thead>
			<tr>
				<th>Name</th>
				<th>ID</th>
				<th>Address</th>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="employe in emplyeList">
				<td>
					<div ng-show="!data" ng-click="data=true" class="click">{{employe.name}}</div>
					<div ng-show="data"><input ng-blur="data=false" type="text" ng-model="employe.name" /></div>
				</td>
				<td>
					<div ng-show="!data">{{employe.ID}}</div>
					<div ng-show="data"><input type="text" ng-model="employe.ID" /></div>
				</td>
				<td>
					<div ng-show="!data">{{employe.add}}</div>
					<div ng-show="data"><input type="text" ng-model="employe.add" /></div>
				</td>
			</tr>
			<tr>
				<td colspan="3">
					<button ng-click="updateSec(employe)">Update</button>
				</td>
			</tr>
		</tbody>

		<tbody>
			<tr ng-repeat="updatEm in employe">
				<td>{{updatEm.name}}</td>
				<td>{{updatEm.ID}}</td>
				<td>{{updatEm.add}}</td>
			</tr>
		</tbody>
 	</table>
   </div>

My Json file is

[
    {"name":"Rohit", "ID":"5Rt", "add":"Delhi"},
    {"name":"Kiran", "ID":"4Kn", "add":"UP"},
    {"name":"Abhay", "ID":"3Ay", "add":"HR"},
    {"name":"Rahul", "ID":"2Rl", "add":"UK"}
]

if i update my table data than i click to update button those data has been updated those data show in next tr — Rohit Azad Malik
– Rohit Azad Malik, Commented May 30, 2015 at 15:35
@Satpal yes this is i want to this but here is only one row show if i edit two row than click to update only show to last update i want to show all update data . — Rohit Azad Malik
– Rohit Azad Malik, Commented May 30, 2015 at 15:50
@Satpal Thanks to give me answer but i want to only those list show those i m update . now you post your code i accept it . if i want to update only two row than click to update than show only two row in bootm row — Rohit Azad Malik
– Rohit Azad Malik, Commented May 30, 2015 at 15:55
See jsfiddle.net/satpalsingh/Lzf4a4sj hope it works as desired — Satpal
– Satpal, Commented May 30, 2015 at 16:11

Satpal · Accepted Answer · 2015-05-30 16:10:36Z

HTML

<tr ng-repeat="employe in emplyeList" ng-click="updateSec(employe)">
</tr>
<tr>
    <td colspan="3">
        <button ng-click="showData()">Update</button>
    </td>
</tr>

<tr ng-if="showEmployee" ng-repeat="employe in modifiedEmplyee">
    <td>{{employe.name}}</td>
    <td>{{employe.ID}}</td>
    <td>{{employe.add}}</td>
</tr>

Script

//Display list
$scope.showEmployee = false;    

//Create an array to hold updated employee
$scope.modifiedEmplyee = [];

//Set updated field to identify updated employee
$scope.updateSec = function (employe) {
    employe.updated = true;
    $scope.showEmployee = false;        
}

//Show data and copy modilfied list
$scope.showData = function () {
    $scope.showEmployee = true;
    $scope.modifiedEmplyee = [];

    for(var i = 0; i< $scope.emplyeList.length; i++)
    {
        var emp = $scope.emplyeList[i];
        if(emp.updated && emp.updated == true){
             $scope.modifiedEmplyee.push(emp);
        }           
    }        
}

DEMO

Collectives™ on Stack Overflow

How to update data copy in next table using angular js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related