我有一张桌子,它的tr重复了。也可以通过单击按钮为其添加新行。
现在假设tr重复了3次,我们再添加2行并输入一些数据。当我们点击提交按钮时,我们如何在控制器中获取表格的全部数据。
我得到了答案但是我的实际情况是这样的 我的HTML页面就像这样
<div ng-repeat="details in Information" >
<!--
my other stuff
-->
<table>
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>city</th>
<th>add</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="detail in details.personInfo">
<td><input type="text" ng-model="detail.name" /></td>
<td><input type="text" ng-model="detail.age" /></td>
<td><input type="text" ng-model="detail.city" /></td>
<td><input type="text" ng-model="detail.add" /></td>
<td><input type="button" ng-click="addnewRow();" /> </td>
</tr>
<tbody>
</table>
<input type="button" ng-click="SaveDetails();" value="SaveDetais"/>
</div>
我的控制器是:
$scope.addnewRow = function(){
var newRow = "<tr>"+
"<td><input type='text' ng-model='detail.name' /></td>"+
"<td><input type='text' ng-model='detail.age' /></td>"+
"<td><input type='text' ng-model='detail.city' /></td>"+
"<td><input type='text' ng-model='detail.add' /></td>"+
"<td><input type='button' ng-click='addnewRow();' /> </td>"+
"</tr>";
$("table tbody").append(newRow);
}
$scope.SaveDetails = function(){
// how i will get all to data from the input fields her
}
现在我如何推送其中的数据。就像我做的那样
$scope.details.personInfo.push({..})
它给我一个错误“personInfo”没有定义 然后针对这种情况应该如何完成
答案 0 :(得分:1)
这里有一个设计问题,当你进行jQuery调用时,这个问题就变得非常明显了。作为一个非常强大的经验法则你不应该在Angular中操纵DOM(特别是通过调用jQuery),特别是在你的控制器中。
您的addnewRow()
功能应该是
$scope.addnewRow = function(){
$scope.details.push({})
}
那么您甚至不需要saveDetails
功能 - details
会自动更新!
答案 1 :(得分:0)
对于初学者,你不想在控制器中进行dom操作。
如果你想要$scope.SaveDetails
(javascript中非构造函数的约定是camelcase),我会做的不是添加标记,而是在details
数组中添加一个新条目:
$scope.addnewRow = function(){
$scope.details.push({SOMEDETAILOBJECT})
}
$scope.SaveDetails = function(){
//some sort of ajax update call that sends $scope.details
}
答案 2 :(得分:0)
你需要改变一点方法。
函数addnewRow
,而不是向DOM添加元素应该向您的详细信息数组添加新的细节,angular将更新您的表。
表格中的数据代表$scope.details
数组,因此如果您想进入控制器,请使用$scope.details
var app = angular.module('app', []);
app.controller('firstCtrl', function($scope) {
function detail(name, age, city, add) {
this.name = name || "";
this.age = age || "";
this.city = city || "";
this.add = add || "";
return this;
}
$scope.details = [{
name: "ammin",
age: "16",
city: "NY",
add: "true"
}, {
name: "joe",
age: "80",
city: "CH",
add: false
}];
$scope.addnewRow = function() {
var newDetai = new detail()
$scope.details.push(newDetai)
}
$scope.save = function() {
console.log($scope.details);
$scope.saved = true
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
<table>
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>city</th>
<th>add</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="detail in details">
<td>
<input type="text" ng-model="detail.name" />
</td>
<td>
<input type="text" ng-model="detail.age" />
</td>
<td>
<input type="text" ng-model="detail.city" />
</td>
<td>
<input type="text" ng-model="detail.add" />
</td>
<td>
<input type="button" ng-click="addnewRow();" />
</td>
</tr>
<tbody>
</table>
<pre ng-show="saved">Details:{{details| json}}</pre>
<button ng-click="save()">Save</button>
</div>
</body>
&#13;
答案 3 :(得分:-1)
您是否试图从范围中获取详细信息?
$scope.SaveDetails = function(){
$scope.details
}