Question

对于angularjs来说，我需要将动态表单数据发布到API。

app.js

$scope.contacts = [
                    { 'cpName':'',
                        'cpDesignation':'' ,
                        'cpDept': '',
                        'cpEmail': '',
                        'cpMobile':''
                    }
                    ];
$scope.addRow = function(){     
    $scope.contacts.push({ 'cpName':$scope.cpName, 'cpDesignation': $scope.cpDesignation, 'cpDept':$scope.cpDept, 'cpEmail':$scope.cpEmail, 'cpMobile':$scope.cpMobile});
    $scope.cpName='';
    $scope.cpDesignation='';
    $scope.cpDept='';
    $scope.cpEmail='';
    $scope.cpMobile='';     
};

联系表格

  <form name="myform" role="form" ng-submit="addRow()">

    <div class="row" ng-class="{true: 'error'}[submitted && myform.cpEmail.$invalid]">

        <div class="form-group">
            <label class="col-md-2 control-label">CONTACT PERSON</label>
            <div class="col-md-4">
                <input type="text" class="form-control" name="cpName"
                    ng-model="cpName" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">DESIGNATION</label>
            <div class="col-md-4">
                <input type="text" class="form-control" name="cpDesignation"
                    ng-model="cpDesignation" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">DEPARTMENT</label>
            <div class="col-md-4">
                <input type="text" class="form-control" name="cpDept"
                    ng-model="cpDept" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">EMAIL*</label>
            <div class="col-md-4">
                <input type="email" class="form-control" name="cpEmail"
                    ng-model="cpEmail" />
                <span style="color:red" ng-show="myform.cpEmail.$dirty && myform.cpEmail.$invalid">
                    <span ng-show="myform.cpEmail.$error.required">Email is required.</span>
                    <span ng-show="myform.cpEmail.$error.email">Invalid email address.</span>
                </span> 
            </div>
        </div>  

        <div class="form-group">
            <label class="col-md-2 control-label">MOBILE</label>
            <div class="col-md-4">
                <input type="number" class="form-control" name="cpMobile"
                    ng-model="cpMobile" />
            </div>
        </div>

        <div class="form-group">                                
            <div style="padding-left:110px">
                <input type="submit" value="Add" class="btn btn-primary"/>
            </div>
        </div>
    </div>  
   </form>

   <table>
        <tr>
            <th>CONTACT PERSON</th>
            <th>DESIGNATION</th>
            <th>DEPARTMENT</th>
            <th>EMAIL</th>
            <th>Mobile</th>         
        </tr>
        <tr ng-repeat="contact in contacts">
            <td>{{contact.cpName}} </td>
            <td>{{contact.cpDesignation}} </td>
            <td>{{contact.cpDept}} </td>
            <td>{{contact.cpEmail}} </td>
            <td>{{contact.cpMobile}} </td>      
        </tr>
    </table>

我知道如何处理单个表单数据而不是动态数据..任何帮助都将受到赞赏。

谢谢

Answer 1

在行上使用Image ..因此，在启动ng-repeat时有1行，因此它会在html中显示一行..现在$scope.contacts新对象到{{1然后在UI中有2行。

所以，现在只需将空对象推送到push即可获得任意数量的行。

不要担心每一行的数据都会在$scope.contacts数组中维护自己的数据..最后只需将此对象发送到服务器。所以，现在你有了动态行。

Answer 2

像这样定义你的表格

<div class="row"  ng-repeat="contact in contacts">

    <div class="form-group">
        <label class="col-md-2 control-label">CONTACT PERSON</label>
        <div class="col-md-4">
            <input type="text" class="form-control" name="cpName"
                ng-model="contact.cpName" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">DESIGNATION</label>
        <div class="col-md-4">
            <input type="text" class="form-control" name="cpDesignation"
                ng-model="contact.cpDesignation" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">DEPARTMENT</label>
        <div class="col-md-4">
            <input type="text" class="form-control" name="cpDept"
                ng-model="contact.cpDept" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">EMAIL*</label>
        <div class="col-md-4">
            <input type="email" class="form-control" name="cpEmail"
                ng-model="contact.cpEmail" />
            <span style="color:red" ng-show="myform.cpEmail.$dirty && myform.cpEmail.$invalid">
                <span ng-show="myform.cpEmail.$error.required">Email is required.</span>
                <span ng-show="myform.cpEmail.$error.email">Invalid email address.</span>
            </span> 
        </div>
    </div>  

    <div class="form-group">
        <label class="col-md-2 control-label">MOBILE</label>
        <div class="col-md-4">
            <input type="number" class="form-control" name="cpMobile"
                ng-model="contact.cpMobile" />
        </div>
    </div>

    <div class="form-group">                                
        <div style="padding-left:110px">
            <input type="submit" value="Add" class="btn btn-primary"/>
        </div>
    </div>
</div>

<input type="button" value="Add" class="btn btn-primary" ng-click="upload()"/>
   <table>
        <tr>
            <th>CONTACT PERSON</th>
            <th>DESIGNATION</th>
            <th>DEPARTMENT</th>
            <th>EMAIL</th>
            <th>Mobile</th>         
        </tr>
        <tr ng-repeat="contact in contacts">
            <td>{{contact.cpName}} </td>
            <td>{{contact.cpDesignation}} </td>
            <td>{{contact.cpDept}} </td>
            <td>{{contact.cpEmail}} </td>
            <td>{{contact.cpMobile}} </td>      
        </tr>
    </table>

这是您的控制器代码

$scope.contacts = [{}];
    $scope.upload = function(){
        //api call
    }
    $scope.addRow = function(){    
        $scope.contacts.push({});
    };

如何在angularjs中发布动态表单数据？

2 个答案: