在 Angular 中更新表行数据
Update table row data in Angular
您好,我正在学习角度,我需要功能方面的帮助,我有一个动态表和一个表单,当我单击动态表的任何行时,数据应该填充在表单的输入框中,当我编辑数据并将其保存在输入框中时,这些输入框应反映相同的更改。
$scope.Save= function($index){
var user1= angular.copy($scope.displayData[$index]);
fc.saveData.push(user1);
console.log(fc.saveData.name);
}}
<head>
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
</head>
<table class="table2">
<tr>
<th>Player</th>
<th>Age</th>
<th>Ranking</th>
</tr>
<tr ng-repeat=" usr in saveData" ng-click="fnClick(usr)">
<td>{{$index}}</td>
<td>{{::usr.player}}</td>
<td>{{::usr.age}}</td>
<td ng-bind="::usr.ranking"></td>
</tr>
</table>` and my input boxes code is here `
<div>
<button class="btn" ng-click="Savedata()">Saveintable</button>
<label for="field1">
<span>Name</span><input type="text" name="" required="true" ng-model="displayData.name"/>
</label>
<label for="field2">
<span>Age</span><input type="text" required="true" ng-model="displayData.age"/>
</label>
<label>
<span>Ranking</span><input type="text" ame="" required="true" ng-model="displayData.ranking"/>
</label>
</label>
</div>
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={};
}
});
}
});
我已经发布了答案,但不知道你的问题。玩了一下,再次发布答案。希望这对您有所帮助。
演示
试试这个超级简单的片段...
<!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>
相关文章:
- 平均值:无法将数据更新到数据库
- d3在数据更新时错误地附加了dom元素
- 使用角度传递的数据更新模态
- jQuery使用XML数据更新UL列表
- ng表DOM未使用数据更新进行更新
- 在线/离线数据更新移动最佳实践
- 使用 预测 API 数据更新的 HTML 模板
- JQuery 数据表列数据更新工作太慢
- 使用Plotly中的新数据更新图形的高性能方法
- 使用新数据更新 D3 饼图.json
- jQuery - 使用相同的数据更新 2 个或多个表单字段
- 如何在数据更新时更新可重用的 d3.js 图形
- 组合框/下拉框在数据更新后未更新
- 在 JavaScript 中的数据更新后,我的 DOM 对象不会更新
- 如何使用来自外部源的数据更新 ng 模型
- 主干.js:使用不同的数据更新集合
- 对数据库进行 AJAX 编辑时,我是否应该立即使用新数据更新接口
- 计划脚本以使用外部数据更新数据库
- 使用从 MongoDB 获取的新数据更新对象属性
- 如何每 n 分钟使用数据更新一次 Web 应用程序