Javascript 以角度动态创建多个嵌套窗体

我正在尝试创建一个可以动态创建多个嵌套表单的表单。以下是html的一个片段：

 <ng-form name="" ng-repeat="form in forms1">
            <button class="btn btn-success btn-md" ng-click="addNewSchedule(form)">
                    <i class="fa fa-plus-circle fa-fw"></i> Add Schedule
            </button><br>
            <div ng-repeat="cont in form.schedule">
                    <div class="row">
                        <div class="col-md-6">
                            <label>Base Date Key <span style="color: red;">*</span></label>
                            <select name="base_date_key" class="form-control" ng-model="cont.base_date_key" ng-options="base_key for base_key in base_date_key">
                                <option value="">Select Base Date Key</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label>Forward Backward <span style="color: red;">*</span></label>
                            <select name="forward_backward" class="form-control" ng-model="cont.forward_backward" ng-options="forward for forward in forward_backward">
                                <option value="">Select Forward Backward Option</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                            <div class="col-md-6">
                                <label>Schedule ID </label>
                                <input type="text" name="schedule_id" class="form-control" ng-model="cont.schedule_id">
                            </div>
                    </div>
                </div>
            <br>

            <hr>
              <ng-form>
                <button class="btn btn-success btn-md" ng-click="">
                    <i class="fa fa-plus-circle fa-fw"></i> Add Schedules
                </button><br>
                <div class="row">
                    <div class="col-md-4">
                        <label>Schedule Amount <span style="color: red;">*</span></label>
                        <input type="text" name="schedule_amount" class="form-control" ng-model="">
                    </div>
                    <div class="col-md-4">
                        <label>Schedule Charge Code</label>
                        <select name="charge_code" class="form-control" ng-model="" ng-options="charge_two.key as charge_two.value for charge_two in schedule_charge_code track by charge_two.key">
                            <option value="">Select Schedule Charge Code</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label>Frequency <span style="color: red;">*</span></label>
                        <input type="text" name="frequency" class="form-control" ng-model="">
                    </div>
                </div>

            <br>

            <div class="row">
                <div class="col-md-4">
                    <label>Schedule Date <span style="color: red;">*</span> </label>
                    <input type="text" 
                           class="form-control" 
                           datepicker-popup="yyyy-MM-dd" 
                           ng-model="bookloan.schedule_date" 
                           is-open="schedule_date.open" 
                           ng-click="schedule_date.open = true" 
                           datepicker-options="scheduleDateOptions" 
                           date-disabled="disabled(date, mode)" 
                           ng-required="true"
                           close-text="Close" />
                </div>
                <div class="col-md-4">
                    <label>Schedule Type <span style="color: red;">*</span></label>
                    <select name="schedule_type" class="form-control" ng-model="" ng-options="schedule for schedule in schedule_type">
                        <option value="">Select Schedule Type</option>
                    </select>
                </div>
            </div>
           </ng-form>
        </ng-form>

基本上，这应该如何工作是当您单击AddSchedule按钮时，该按钮将显示四个表单字段（如上所述），并且还应该显示AddSchedules按钮。单击“添加计划”按钮时，应动态添加计划金额、计划费用代码、频率、计划日期和计划类型输入字段

JavaScript中的输出也应如下所示：

[
  {
    schedule : [
                 {
                    base_date_key: "",
                    forward_backward:"",
                    schedule_id:"",
                    schedules : [
                                  {
                                     schedule_amount : "",
                                     schedule_charge_code: "",
                                     frequency: "",
                                     schedule_date: "",
                                     schedule_type: ""

                                  }
                                ]
                 }
               ]
    }
]

---

我怎样才能提前完成这个感谢呢。

那么问题是什么？什么不起作用？

ng model

不能

”

@RayonDabre我想知道在单击“添加计划”按钮时如何动态添加字段。我知道ng模型不能是一个空字符串，我只是不知道该怎么做。你不需要嵌套的

ng表单

，而是

ng repeat

内部

ng repeat

。内部

ng repeat

将重复

计划

@newiedev，你不能在html中插入嵌套表单！！！

  var schedules; 
  $scope.forms1 = [{base_date_key: "",forward_backward: "",schedule_id:""}];
   $scope.addNewSchedule = function(form1){
                   console.log(form1.schedule);
                   if(typeof form1.schedule === 'undefined') {
                    form1.schedule = [];
                  }


                  form1.schedule.push({name:"",base_date_key: "",forward_backward: "",schedule_id: ""});

                  schedules = form1.schedule;

            };

[
  {
    schedule : [
                 {
                    base_date_key: "",
                    forward_backward:"",
                    schedule_id:"",
                    schedules : [
                                  {
                                     schedule_amount : "",
                                     schedule_charge_code: "",
                                     frequency: "",
                                     schedule_date: "",
                                     schedule_type: ""

                                  }
                                ]
                 }
               ]
    }
]