在角度js中提交带有动态字段的表单

时间:2014-10-13 12:41:14

标签: html5 angularjs forms angularjs-ng-repeat

功能:当我在form A中添加资源时。资源显示在form B中。然后我需要提交form B

我无法提交。主要原因是:form B中显示的所有字段都在循环中。所以我无法为每个字段指定具体名称。

enter image description here

HTML Codes of form B

<form id="attendanceSheet" name="attendanceSheet" ng-submit="fillupAttendanceSheet(attendanceSheet.$valid)" >                   
<table ng-table="tableParams" class="table">
    <tr ng-repeat="resource in resources">
        <td data-title="'Billable Resource'" style="text-align:center"><b>{{resource.resource_name}}</b></td>                               
        <td data-title="'Working Hours'" style="text-align:center"><input type="number" style="width: 55px;" min="0" max="8" ng-model="timeSheetTest.hour" value="8" required></td>
        <td data-title="'Working Hours'" style="text-align:center"><input type="number" style="width: 55px;" ng-model="timeSheetTest.nonhour" min="0" max="8" required></td>
    </tr>
</table>
<div class="span2">
    <button name="loginBtn" type="submit" class="btn" type="submit">Submit Sheet</button>
</div>
</form>

controller.js codes of form B

var addTimeSheet = function(timeSheetTest) {
console.log(timeSheetTest);  // here I should get the form values
}

$scope.fillupAttendanceSheet = function(isFormValid) {
    if(isFormValid){
        addTimeSheet($scope.timeSheetTest);
}

1 个答案:

答案 0 :(得分:2)

使用$ index为每行timeSheetTest[$index].hour

创建新字段
    <input type="number" style="width: 55px;" min="0" max="8" ng-model="timeSheetTest[$index].hour" value="8" required>

这样你就得到了一系列对象......