以角度动态创建多个嵌套表单

Question

我正在尝试创建一个可以动态创建多个嵌套表单的表单。这是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>

到目前为止我所做的是，当用户点击Add Schedule按钮时，它会显示四个输入字段。这是单击Add Schedule按钮时动态创建的html代码片段：

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

此外，这里是能够创建动态输入字段的JavaScript代码：

  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;

            };

基本上，这应该如何工作是当你单击Add Schedule按钮时，它会显示四个表单字段（如上所述），还应该显示Add Schedules Button。单击“添加计划”按钮时，它应动态添加计划金额，计划费用代码，频率，计划日期和计划类型输入字段。

此外，JavaScript中的输出应该是这样的：

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

                                  }
                                ]
                 }
               ]
    }
]

我如何提前完成此任务。