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

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

javascript jquery html angularjs

Javascript 如何使用angularjs在多次单击按钮时添加新字段,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,我试图在单击按钮时多次添加字段，它们相互嵌套 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--</opt

我试图在单击按钮时多次添加字段，它们相互嵌套

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>


--选择机器--
数据1
数据2
添加更多
添加

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

}
 });

var-app=angular.module（'myApp'，[]）；
app.controller（'myController'，函数（$scope）{
$scope.forms=[{}]；
$scope.addFields=函数（表单）{
if（typeof form.contacts===‘未定义’）{
form.contacts=[]；
}
形式。触点。推送（“”）；
}   
$scope.add=函数（）{
var max_fields=10；//允许的最大输入框数
var wrapper=$（“.data”）；//字段包装器
var add_button=$（“.add_s”）；//添加按钮ID
变量y=1；
var x=1；//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x


错误：
如果我点击add按钮，我只得到一次上面的div标记重复，但我希望它会重复很多次，
当我点击添加更多按钮时，第二个div标签中的数据应该重复。但是它正在发生
请帮助..提前谢谢。
使用此代码。这是您的密码
看法

新形式
--选择机器--
数据1
数据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>

工作区：
基本思想是将字段放在ng repeat中，并将其绑定到空数组。单击按钮时，它会在数组中添加一个空元素，该元素将自动绑定到ng repeat的新元素
快乐编码
编辑：由于我忘记阅读整个请求，我添加了另一个级别的重复字段。
你的想法像jQuery，angularJS不是这样工作的。看看这个了解更多。不要混合使用jQuery和angularJS。angularJS强大到足以处理你用jQuery创建的点击事件。如上所述除非真的需要，否则你不应该将jQuery与AngularJS结合使用，因为它们有不同的方法。老实说，在你的情况下，它看起来不太需要。顺便说一句，解决这个问题的一种方法是将数据绑定到数组中，并使用Add按钮将新元素推入其中。你可以使用ng重复显示现有元素这是我得到的..但我的问题不同..我需要在“添加更多按钮”中再添加一个按钮..我单击该按钮，我需要在输入框中添加一个下拉框（选择标记）。在控制器中添加一个数组级别。检查我的JSFIDDLE，我刚刚用您想要的更新了它！我的荣幸！很高兴我能提供帮助
<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>

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