How to create dynamic multiple fields in angular js

Question

I have angular js app. i am adding multiple dynamic fields inside that particular form.i have try like this

js file look like this

$scope.commonData = [{
    'a': '',
    'b': '',
}];

$scope.commonFormField = {
    service: [],
    exeName: []
};

$scope.submitCommonData = function() {
    // console.log($scope.commonFormField);
    console.log($scope.commonData);
    event.preventDefault();
}
$scope.addNewData = function() {
    $scope.commonData.push({
        'a': '',
        'b': '',
    });
}
$scope.removeCommonData = function(z) {
    $scope.commonData.splice(z, 1);
}
$scope.addNewFields = function() {
    $scope.commonFormField.serviceName.push('');
};
$scope.removeFields = function(z) {
    $scope.commonFormField.serviceName.splice(z, 1);
};

html look like this

<div class="tab-pane" id="tab_2">
                      <a ng-click="addNewData()" href="javascript:void(0)">Add Common Data</a>
                      <form name="commonServicesForm" ng-submit="submitCommonServie();" role="form">
                        <div class="box-body" data-ng-repeat="Data in commonData track by $index" style="border: 1px dotted #000; margin-top:10px">
                          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <button type="button" class="close" ng-click=removeCommonData($index);>x</button>
                          </div>
                          <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6">
                            <label for="" class="control-label">a</label>
                            <input type="text" required ng-model="Data.a[$index]"  class="form-control">
                          </div>
                          <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6">
                            <label for="" class="control-label">b</label>
                            <input type="text" required ng-model="Data.b[$index]"  class="form-control">
                          </div>
                          <div class="col-md-12 no-padding">
                              <fieldset data-ng-repeat="field in commonFormField.serviceName track by $index2+$index">
                                   <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                    <label for="" class="control-label">Service Name</label>
                                    <input type="text" required ng-model="commonFormField.serviceName[$index2+$index]" name="serviceName" id="vmName" placeholder="Enter Service name" class="form-control">
                                  </div>
                                  <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6">
                                    <label for="" class="control-label">Exe name</label>
                                    <input type="text" required ng-model="commonFormField.exeName[$index2+$index]" name="exeName" id="exeName" placeholder="Enter Exe name" class="form-control">
                                  </div>
                                  <button type="button" class="btn btn-default btn-sm" ng-click="removeFields($index2+$index)">
                                    <span class="glyphicon glyphicon-minus"></span> REMOVE
                                  </button>
                              </fieldset>
                              <a ng-click="addNewFields()" href="javascript:void(0)">Add more service</a>
                            </div>
                        </div>
                        <div class="box-footer">
                          <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6">
                              <button type="submit" class="btn btn-primary">Submit</button>
                          </div>
                        </div>
                      </form>
                    </div>

The problem is addNewData function is working properly but the other function addNewFields is not working properly.

addNewFields is working fine when there is only one replica of html but when we create new replica of the html by clicking on addNewData then click on new generated html button of addNewFields its add new fields in both set of html means previous one also have new fields new html have same fields.

Answer 1

I don't know if it's the issue. but your JSON object looks like that:

$scope.commonFormField = {
service: [],
exeName: []

};

and your HTML using field called: serviceName

<fieldset data-ng-repeat="field in commonFormField.serviceName track by $index2+$index">