在angularjs

Question

我有一个表单，但在该表单中我有一个Add Schedule按钮，用于生成四个输入字段（Base Date Key，Forward Backward，Schedule ID）和Add Schedules按钮。此外，“添加计划”按钮（“添加计划”按钮的子项）可以生成五个输入字段（计划金额，计划费用代码，频率，计划日期，计划类型）。

我已经尝试过这样做，但根本不适合我。这是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>
                     <button class="btn btn-success btn-md" ng-click="addNewSchedules($index)">
                        <i class="fa fa-plus-circle fa-fw"></i> Add Schedules
                     </button><br>
                     <div ng-repeat="scheduleData in schedules">

                                <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="scheduleData.schedule_amount">
                                    </div>
                                    <div class="col-md-4">
                                        <label>Schedule Charge Code</label>
                                        <select name="charge_code" class="form-control" ng-model="scheduleData.schedule_charge_code" 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="scheduleData.frequency">
                                    </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="scheduleData.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="scheduleData.schedule_type" ng-options="schedule for schedule in schedule_type">
                                        <option value="">Select Schedule Type</option>
                                    </select>
                                </div>
                            </div>
                     </div>
                </div>

            <br>

这也是我在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;

            };

$scope.addNewSchedules = function(index){
                     console.log(index);
                     $scope.schedules.push({schedule_amount : "", schedule_charge_code:"", frequency: "M", schedule_date:"" ,schedule_type:""});
            };

最终结果应采用JSON格式，如下所示：

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

提前感谢您的帮助。