//动态表,带插入行和删除。但是当我插入行时,如果第一行有一些信息,当我创建新行时,值会被转移,当我想要一个空的新行时,有人可以帮忙吗?
//表创建
<html>
<head>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<div ng-app = "mainApp" ng-controller = "studentController">
<td>
<table id="Pessoas">
<tr>
<th>Name</th>
<th>age</th>
<th>email</th>
<th>delete</th>
</tr>
<tr >
<td><input size=25 type="text" id="latbox"/></td>
<td><input size=25 type="text" id="lngbox" /></td>
<td><input size=25 type="text" id="lngbox" /></td>
<td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)"/></td>
<input type="button" id="addmorePOIbutton" value="Add" onclick="insRow()"/>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script>
// script to delete row
function deleteRow(row) {
var i = row.parentNode.parentNode.rowIndex;
document.getElementById('Pessoas').deleteRow(i);
}
// script to insert new row
function insRow() {
var x = document.getElementById('Pessoas');
var new_row = x.rows[1].cloneNode(true);
x.appendChild(new_row);
}
//Data
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
subjects: [{
name: 'Diogo',
age: 70,
email: 'aaaa@aaa.com'
}, {
name: 'Joao',
age: 80,
email: 'aaaa@aaa.com'
}, {
name: 'maria',
age: 65,
email: 'aaaa@aaa.com'
}, {
name: 'Rui',
age: 75,
email: 'aaaa@aaa.com'
}, {
name: 'Ana',
age: 67,
email: 'aaaa@aaa.com'
}],
};
});
</script>
</body>
</html>
答案 0 :(得分:0)
当然你有值,你正在复制行DOM元素。
混合原生javascript和angular等几乎是一个坏主意。
只需使用ng-repeat:
<tr ng-repeat="subject in student.subjects" >
<td><input size=25 type="text" ng-model="subject.name" name="latbox"/></td>
<td><input size=25 type="text" subject="subject.age" name="lngbox1"/></td>
<td><input size=25 type="text" name="lngbox2" /></td>
<td><input type="button" id="delPOIbutton" value="Delete" ng-click="deleteRow($index)"/></td>
<input type="button" id="addmorePOIbutton" value="Add" ng-click="insRow()"/>
</tr>
然后在控制器中:
$scope.insRow = function(){
$scope.student.subject.push({});//push new empty object this should do the trick
}
$scope.deleteRow(index)
{
$scope.student.subject.slice(index,1);// the $index in the html is a vaaraible fron ng-repeat so i can pass it in the js here in order to remove the element. Slice modify the current array, he returns the elements removed.
}
当检测到变化时,角度将自己重绘元素。
注意:我通过 ng-click 更改 onclick 。我按名称更改了id,因为你可能有相同名称的元素,但你没有具有相同id的元素。