Javascript 更新表中的行数据
您好，我正在学习angular，我需要一个功能方面的帮助，我有一个动态表和一个表单，当我单击动态表的任何一行时，数据应该填充到表单的输入框中，当我编辑和保存数据到输入框中时，这些数据应该反映在同一行上的更改`Javascript 更新表中的行数据,javascript,html,angularjs,Javascript,Html,Angularjs,您好，我正在学习angular，我需要一个功能方面的帮助，我有一个动态表和一个表单，当我单击动态表的任何一行时，数据应该填充到表单的输入框中，当我编辑和保存数据到输入框中时，这些数据应该反映在同一行上的更改` $scope.Save=函数（$index）{ var user1=angular.copy（$scope.displayData[$index]）； fc.saveData.push（user1）； console.log（fc.saveData.name）； }} 玩家 年龄 排名
$scope.Save=函数（$index）{
var user1=angular.copy（$scope.displayData[$index]）；
fc.saveData.push（user1）；
console.log（fc.saveData.name）；
}}
玩家
年龄
排名
{{$index}}
{{：：usr.player}
{{：：usr.age}
`我的输入框代码在这里`
可保存
名称
年龄
排名
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="row">
<table class="table">
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
<th>Ranking</th>
<th>Edit</th>
</tr>
<tr ng-repeat="usr in tableData">
<td>{{$index+1}}</td>
<td>{{usr.name}}</td>
<td>{{usr.age}}</td>
<td>{{usr.ranking}}</td>
<td><button ng-click="edit($index)">Edit</button></td>
</tr>
</table>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-lg-3">
<form>
<div class="form-group">
<label>Name : </label>
<input type="text" name="" ng-model="displayData.name" class="form-control"/>
</div>
<div class="form-group">
<label>Age : </label>
<input type="text" ng-model="displayData.age" class="form-control"/>
</div>
<div class="form-group">
<label>Ranking : </label>
<input type="text" ng-model="displayData.ranking" class="form-control"/>
</div>
<button class="btn" ng-click="Savedata(index)">Save in table</button>
</form>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope)
{
$scope.index = -1;
$scope.displayData = [];
$scope.tableData =
[
{name:'paresh',age:20,ranking:2},
{name:'gami',age:25,ranking:1},
]
$scope.Savedata = function(index)
{
if(index==-1)
{
//add
$scope.tableData.push($scope.displayData);
$scope.displayData=[];
$scope.index = -1;
}
else
{
$scope.tableData[index] = $scope.displayData;
$scope.displayData=[];
$scope.index = -1;
}
}
$scope.edit = function(index)
{
console.log(index);
$scope.index = index;
$scope.displayData['name'] = $scope.tableData[index]['name'],
$scope.displayData['age'] = $scope.tableData[index]['age'],
$scope.displayData['ranking'] = $scope.tableData[index]['ranking'];
}
});
</script>
安古拉斯普朗克
文件。写（“”）；
#
名称
年龄
排名
编辑
{{$index+1}}
{{usr.name}
{{usr.age}
{{usr.ranking}
编辑
姓名：
年龄：
排名：
保存在表中
var app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）
{
$scope.index=-1；
$scope.displayData=[]；
$scope.tableData=
[
{姓名：'paresh'，年龄：20岁，排名：2}，
{姓名：'gami'，年龄：25岁，排名：1}，
]
$scope.Savedata=函数（索引）
{
如果（索引==-1）
{
//加
$scope.tableData.push（$scope.displayData）；
$scope.displayData=[]；
$scope.index=-1；
}
其他的
{
$scope.tableData[索引]=$scope.displayData；
$scope.displayData=[]；
$scope.index=-1；
}
}
$scope.edit=函数（索引）
{
控制台日志（索引）；
$scope.index=索引；
$scope.displayData['name']=$scope.tableData[index]['name']，
$scope.displayData['age']=$scope.tableData[index]['age']，
$scope.displayData['ranking']=$scope.tableData[index]['ranking']；
}
});
谢谢Paresh，但问题是没有实际单击saveintable按钮，表中的数据由于双向数据绑定而发生更改。这正是我面临的问题。因此，表中的数据只应在按钮操作后更改。我希望单击行而不是编辑按钮，行数据应该填充在输入字段中，不要使用$index。初学者常犯的错误do@Saksham谢谢，但有什么原因吗？谷歌有很多答案。特别是，如果范围发生更改，则会导致错误。
var app=angular.module("myApp",[]);
app.controller("startCtrl",function($scope){
$scope.saveData=[{
player:"John",
age:"24",
ranking:'1'
},
{
player:"John1",
age:"25",
ranking:'2'
},
{
player:"John3",
age:"26",
ranking:'3'
}];
$scope.fnClick=function(usr,index)
{
$scope.formData=angular.copy($scope.saveData[index]); //usr object will be assigned to $scope.formData...
$scope.formData.index=index;
console.log($scope.formData);
}
$scope.SaveDataFun= function(formData){
console.log('save data');
var index$=formData.index;
console.log(index$);
// now I assume that displayData is a list of objects.
angular.forEach($scope.saveData,function(data,index){
console.log(index +' '+ index$);
if(index==index$) // this will match your ediated row index$ to displayData objects row index.
{ console.log('if')
console.log(data);
$scope.saveData.splice(index,1);
$scope.saveData.splice(index,0,formData);
console.log(formData);
$scope.formData={};
}
});
}
});