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

How to add new field when button is clicked multiple times by using angularjs

本文关键字：新字段 添加 字段 按钮 angularjs 何使用 单击      更新时间：2023-09-26

我正在尝试在单击按钮时多次添加字段，它们相互嵌套。.我正在尝试做什么，如图所示

网页代码 ：

<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标签中的添加更多按钮数据时，应该重复。但它正在发生..:(..

请帮忙.. 提前谢谢你。

使用此代码。这是扑克。

$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>
这是我对您的

问题的看法以及我将如何做到这一点：

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

Working JSFiddle ： JSFIDDLE

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

祝您编码愉快！

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

相关文章：