0

I have a form, but within that form I have a Add Schedule button which is to generate four input fields (Base Date Key, Forward Backward, Schedule ID) and a Add Schedules button. Additionally, that Add Schedules button (which is a child of the Add Schedule button) can generate five input fields (Schedule Amount, Schedule Charge Code, Frequency, Schedule date, Schedule type).

I have made attempt to doing so, but it is not working out for me at all. Here is a snippet of the 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>

Also here is what I have done on JavaScript side :

 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:""});
            };

the end result should be in a JSON format like this:

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

Thanks in advance for your help.

2

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.