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

【问题标题】：How to add new field when button is clicked multiple times by using angularjs使用angularjs多次单击按钮时如何添加新字段
【发布时间】：2016-02-05 18:58:05
【问题描述】：

我试图在单击按钮时多次添加字段，它们相互嵌套..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 标签中添加更多按钮数据时，应该重复。但它正在发生..:( ..

请帮忙..提前谢谢你。

【问题讨论】：

你像 jQuery 一样思考，这不是 angularJS 的工作方式。看看这个以了解更多信息。 stackoverflow.com/questions/14994391/…
不要混合使用 Jquery 和 AngularJs。 AngularJS 足够强大，可以处理您使用 Jquery 创建的那些点击事件。
如上所述，除非确实需要，否则不应真正将 jQuery 与 AngularJS 一起使用，因为它们有不同的方法。老实说，在您的情况下，它看起来并不需要那么多。顺便说一句，解决它的一种方法是将数据绑定到一个数组中，然后使用“添加”按钮将新元素推入其中。您可以使用 ng-repeats 显示现有元素

标签： javascript jquery html angularjs

【解决方案1】：

使用此代码。这是plunker。

$scope.forms = [];
$scope.addForms = function () {
   $scope.forms.push({contacts : []});
};
$scope.addContact = function (form) {
  form.contacts.push({});
};

查看

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

【讨论】：

【解决方案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 的新元素。

编码愉快！

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

【讨论】：

这我得到了..但我的问题不同..我需要在里面再添加一个按钮添加更多按钮..当我点击我需要得到一个下拉框（选择标签）以及输入框。
在控制器中添加一个数组级别。检查我的 JSFIDDLE，我刚刚用你想要的更新了它！
我的荣幸！很高兴我能帮上忙