Question

我试图在点击按钮时多次添加字段，它们相互嵌套.. what i am trying to do as shown in the picture

html代码：

<body ng-controller="myController">
<form name="{{form.name}}" ng-repeat="form in forms">
<div ng-repeat="cont in form.contacts">
        <select>
        <option>--select machine--</option>
        <option>data1</option>
        <option>data2</option>
        </select>
        <div class="data">          
        <button class="add_s" ng-click = "add()">Add more</button>
        </div>
      </div>
      <button ng-click="addFields(form)">Add</button>
       </body>

angularjs代码：

var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.forms = [{ }];
$scope.addFields = function (form) {
if(typeof form.contacts === 'undefined') {
form.contacts = [];
 }
form.contacts.push('');
}   
$scope.add = function(){
        var max_fields      = 10; //maximum input boxes allowed
        var wrapper         = $(".data"); //Fields wrapper
        var add_button      = $(".add_s"); //Add button ID
        var y=1;
        var x = 1;//initlal text box count
        $(add_button).click(function(e){ //on add input button click
            e.preventDefault();
            if(x < max_fields){ //max input box allowed
                x++; //text box increment
              $(wrapper).prepend('<div><select><option>--select--</option><option>data1.1</option><option>data1.2</option></select><input type="text"><input type="text"><input type="text"><input type="text"><a href="#" class="remove_field"><i class="glyphicon glyphicon-trash"></i></a></div>'); 

            }
        });

        $(wrapper).on("click",".remove_field", function(e){ //user click on remove text                                                                                                                                                     
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })

}
 });

错误：如果我点击添加按钮我只得到一次上面的div标签重复，但我想这应该重复多次，当我点击时，在第二个div标签中添加更多按钮数据应该重复。但它正在发生.. :( ..

请帮助..提前谢谢你。

Answer 1

使用此代码。这是plunker。

<form name="{{form.name}}" ng-repeat="form in forms" style="border:1px solid red">
        New Form 
        <div ng-repeat="cont in form.contacts">
            <select>
              <option>--select machine--</option>
              <option>data1</option>
              <option>data2</option>
            </select>
        </div>
        <div class="data">    <!-- Move this out of contacts -->      
            <button class="add_s" ng-click = "addContact(form)">Add more</button>
          </div>
        </form><!--You have unclosed form tag -->
      <button ng-click="addForms()">Add</button>

查看

www.domain.com/someword/xxxx-other-words?tmpl=component&print=1

Answer 2

以下是我对你的问题的看法以及我是如何做到的：

    <div ng-controller="MyCtrl">
  <button ng-click="addBloc()">
    Add bloc
  </button>
  <div ng-repeat="bloc in blocs">
    <div>
      <button ng-click="addNewField($index)">
        Add field
      </button>
    </div>
    <div ng-repeat="field in bloc.fields">
      <select ng-model="field.gender">
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>
      <input type="text" ng-model="field.FirstName">
      <input type="text" ng-model="field.LastName"> {{field.gender}} {{field.FirstName}} {{field.LastName}}
    </div>
  </div>

</div>

和控制器：

 $scope.blocs = [];
  $scope.fields = [];
  $scope.addNewField = function(index) {
  alert(index);
    $scope.blocs[index].fields.push({
      gender: "",
      FirstName: "",
      LastName: ""
    });
  };
  $scope.addBloc = function() {
    $scope.blocs.push({
      fields: []
    });

使用JSFiddle：JSFIDDLE

基本思想是将你的字段放在ng-repeat中并将其绑定到空数组。当您单击该按钮时，它会在数组中添加一个空元素，该元素将自动绑定到ng-repeat的新元素。

快乐的编码！

编辑：因为我忘了阅读整个请求，所以我添加了另一个级别的重复字段，如前所述。

如何使用angularjs多次单击按钮时添加新字段

2 个答案: