如何使用角度js更新下一個表中的數據副本

我有一個表，有些數據是JSON文件讀取數據。

數據快到了，如果我點擊的名字比編輯模式，如果我模糊不是隱藏編輯模式，並顯示視圖模式是好的，我有做到這一點。

現在我有一個更新按鈕，如果我在插入點擊此按鈕不僅僅是更新數據下一行如何做到這一點，請檢查這一點，並幫助我。

我的代碼是這樣的

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

 

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

.click{ 
 

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

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

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

 
    
 
<body> 
 

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

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

我的JSON文件是

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

來源

2015-05-30 Rohit Azad

你想實現什麼究竟？ – Satpal

如果不是我點擊更新按鈕，這些數據已經更新在明年TR –

@Satpal沒錯這就是我想這一點，但這裏的數據顯示更新我的表中的數據只有一個節目，如果我編輯兩個行比點擊更新只顯示最後更新我想顯示所有更新數據。 –

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>

腳本

//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

來源

2015-05-30 16:10:36 Satpal

如何使用角度js更新下一個表中的數據副本

回答

相關問題