javascript - 从 Angular 形式数据构建表格

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>

和 Controller :

$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 绑定(bind)应该是 item。不是 claim 提交。

<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>

Controller

$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 = {};
}

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