Question

您在我的项目中使用了一个简单的功能。

我有一个表，一些数据是在json文件中获取数据。

数据即将到来，如果我点击名称而不是编辑模式打开如果我模糊而不是隐藏编辑模式并显示视图模式很好我已经这样做了。

现在我有一个更新按钮，如果我点击这个按钮，而不是只插入下一行的更新数据怎么做请检查这个并帮助我。

我的代码就是这个

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>

我的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"}
]

Answer 1

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

如何使用角度js更新下表中的数据副本

1 个答案: