从角度形式数据构建表格

Question

所以我正在尝试构建一个表格，该表格将输入的表单数据存储在客户端上，并将每个输入属性推送到一个组中以创建一个对象。从那里，表格是使用 ng-repeat 构建的。开始的代码如下，但没有发生任何事情。有人可以帮忙吗？

                <form class="addClaim" ng-submit="submitClaim(claimInfo)">
                    <div class="form-group">
                        <label for="beneSelect">Select your benefit</label>
                        <select class="form-control" id="beneSelect" >
                            <option ng-repeat="descr in claim.claimBenes" data-ng-model="claimInfo.providerName">{{ descr.descr }}</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="start">Date of Service</label>
                        <div>
                            <input type="text" class="form-control" id="start" placeholder="--/--/----" data-ng-model="claimInfo.fromDate" style="width: 240px;">
                            <span>To</span>
                            <input type="text" class="form-control" id="end" placeholder="--/--/---- (optional)" data-ng-model="claimInfo.toDate" style="width: 240px;">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="providerName">Provider Name</label>
                        <input type="text" class="form-control" id="providerName" data-ng-model="claimInfo.provider">
                    </div>
                    <div class="form-group">
                        <label for="forWhom">For Whom</label>
                        <input type="text" class="form-control" id="forWhom" data-ng-model="claimInfo.who">
                    </div>
                    <div class="form-group" ng-show="claimInfo.benefCode == 'HCFSA'">
                        <label for="age">Age</label>
                        <input type="text" class="form-control" id="age" data-ng-model="claimInfo.who">
                    </div>                    

                    <div class="form-group">
                        <label for="claimAmount">Amount</label>
                        <input type="text" class="form-control" id="claimAmount" data-ng-model="claimInfo.amount">
                    </div>
                    <div class="form-group">
                        <label for="claimComment">Comments</label>
                        <textarea class="form-control" rows="5" id="claimComment" data-ng-model="claimInfo.comments"></textarea>                        
                    </div>
                    <div class="form-group">
                        <label class="control-label"></label>
                        <div>
                            <input type="button" class="btn btn-primary" ng-click="saveClaim()" value="add claim" style="float: right;">
                        </div>
                    </div>
                </form>

桌子：

<div class="claimedTable" style="background-color: #ffffff; color: black;">
    <table class="table">
        <thead>
            <tr>
                <th>service date</th>
                <th>provider</th>
                <th>amount</th>
                <th>edit</th>
                <th>delete</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in claimSubmit">
                <td>{{ claimInfo.fromDate }}</td>
                <td>{{ claimInfo.provider }}</td>
                <td>{{ claimInfo.amount }}</td>
                <td><a href="#"><i class="fa fa-pencil-square-o"></i></a></td>
                <td><a href="#"><i class="fa fa-trash-o"></i></a></td>            
            </tr>
        </tbody>
    </table>
</div>

和控制器：

$scope.claim = [];

claimsService.getClaim().then(function (results) {

    $scope.claim = results.data;

});

// submit all claim objects entered
$scope.claimsSubmit = [];

$scope.claimInfo = {
    id: "",
    benefitId: "",
    isSecIns: "",
    isNoResId: "",
    expenseTypeId: "",
    fromDate: "",
    toDate: "",
    provider: "",
    who: "",
    depId: "",
    age: "",   
    amount: "",
    comments: "",
    isOffset: ""
};

$scope.saveClaim = function() {
    $scope.claimsSubmit.push($scope.claimInfo);
    //clears scope so form is empty
    $scope.claimInfo = {};
}

当我在字段中输入数据并单击提交时，什么都不会离开，也不会发布到表格中。我想要作为对象而不是数组的原因是因为表格可能有多个行项目，具体取决于表单被字段输出和提交的次数。

似乎在某个简单的地方我出错了，但不知道在哪里。有什么帮助吗？

非常感谢。

Answer 1

您的代码中存在一些问题。这里稍微整理了一下……

HTML

<form class="addClaim"> // ng-submit not needed in form tag

ng-repeat 绑定应该是 item。不主张提交。

<tr ng-repeat="item in claimsSubmit">
  <td>{{ item.fromDate }}</td>
  <td>{{ item.provider }}</td>
  <td>{{ item.amount }}</td>
  <td><a href="#"><i class="fa fa-pencil-square-o"></i></a></td>
  <td><a href="#"><i class="fa fa-trash-o"></i></a></td>            
</tr>

控制器

$scope.claim = []; // This can be removed.

claimsService.getClaim().then(function (results) {
    $scope.claim = results.data;
});

// submit all claim objects entered
$scope.claimsSubmit = [];
$scope.claimInfo = {}; // This just needs to create an object.

$scope.saveClaim = function() {
    $scope.claimsSubmit.push($scope.claimInfo);
    //clears scope so form is empty
    $scope.claimInfo = {};
}

这应该足以让表单为您填充表格。表格中显然缺少表单数据，但它会让您朝着正确的方向前进。