Question

我有角度js应用程序。我正在该特定形式中添加多个动态字段。我尝试这样

js文件看起来像这样

$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看起来像这样

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

问题是addNewData功能正常，但另一个功能addNewFields无法正常工作。

当只有一个html副本时，

addNewFields工作正常，但是当我们通过点击addNewData创建新的html副本然后点击addNewFields的新生成的html按钮时在两组html中添加新字段意味着前一个字段也有新字段，新的html具有相同的字段。

Answer 1

我不知道这是不是问题。但是你的JSON对象看起来像这样：

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

};

和你的HTML使用字段：serviceName

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

如何在角度js中创建动态多个字段

1 个答案: