Question

我有一个表单，用户有10个文本字段。但最初只显示了1个文本字段。如果用户需要输入更多数据，可以点击添加一个按钮，然后显示最多10个下一个文本字段。

像这样：

我正在使用angular.js所以我考虑使用ng-show隐藏＆amp;显示字段。

sec_to_time

我无法找出最有效的方法。任何提示，帮助或建议都会很棒。

Answer 1

没有测试过，但我就是这样做的：

   <div class="form-group" >
    <input ng-repeat="i in getNumber(number)" type="text" class="form-control" name="point{{i}}" ng-show="$index<=counter">
    <span><button ng-click="addOne()">Add One</button></span>
</div>

在你的控制器中添加如下内容：

$scope.number = 10;
$scope.getNumber = function(num) {
    return new Array(num);   
}

$scope.counter=0;
$scope.addOne= function() {
    $scope.counter++;  
}

Answer 2

您可以轻松地向DOM添加元素：

function createPetField() {
  var input = document.createElement('input');
  input.type = 'text';
  input.name = 'pet[]';
  return input;
}

var form = document.getElementById('myForm');
document.getElementById('addPet').addEventListener('click', function(e) {
  form.appendChild(createPetField());
});

Answer 3

可能好的方法是创建输入字段数组然后重复它们。当用户单击AddOne时，只需按下数组中的输入字段，它就会在那里。

Answer 4

要进入Angular路线，我建议使用ng-repeat。这可能不是您想要的小提琴，但它显示了如何使用ng-repeat，您可以根据需要进行修改：

小提琴：https://jsfiddle.net/jvsnao97/5/

<body ng-app="myApp" ng-controller="myController">
    <button ng-click="add_input()">Add Input</button>
    <br/><br/>
    <input type="text" class="form-control" ng-repeat="x in random_array" name="point{{$index}}">
</body>

var app = angular.module("myApp", []);
app.controller("myController", ["$scope", function($scope) {
    $scope.random_array = [0]  
    $scope.add_input = function() {
        var i = $scope.random_array.length
        $scope.random_array.push(i)
    }
}]);

当您需要新的<input>时，只需将新元素推送到$scope.random_array。

Answer 5

  <html>
        <head>
        <title>jQuery add / remove textbox</title>


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <style type="text/css">
            div{
                padding:8px;
            }
        </style>

        </head>

        <body>

        <h1>jQuery add / remove textbox example</h1>

        <script type="text/javascript">

        $(document).ready(function(){

            var counter = 2;

            $("#addButton").click(function () {

            if(counter>10){
                    alert("Only 10 textboxes allow");
                    return false;
            }   

            var newTextBoxDiv = $(document.createElement('div'))
                 .attr("id", 'TextBoxDiv' + counter);

            newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
                  '<input type="text" name="textbox' + counter + 
                  '" id="textbox' + counter + '" value="" >');

            newTextBoxDiv.appendTo("#TextBoxesGroup");


            counter++;
             });

             $("#removeButton").click(function () {
            if(counter==1){
                  alert("No more textbox to remove");
                  return false;
               }   

            counter--;

                $("#TextBoxDiv" + counter).remove();

             });

             $("#getButtonValue").click(function () {

            var msg = '';
            for(i=1; i<counter; i++){
              msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
            }
                  alert(msg);
             });
          });
        </script>
        </head><body>

        <div id='TextBoxesGroup'>
            <div id="TextBoxDiv1">
                <label>Textbox #1 : </label><input type='textbox' id='textbox1' >
            </div>
        </div>
        <input type='button' value='Add Button' id='addButton'>
        <input type='button' value='Remove Button' id='removeButton'>
        <input type='button' value='Get TextBox Value' id='getButtonValue'>

        </body>
        </html>

Answer 6

JQuery可用于在addOne()方法中添加输入。

像这样：

＆＃13;

var maxInputs = 10;
var currentInput = 0;

function addOne() {
  currentInput++;
  if (currentInput > maxInputs) {
    currentInput = maxInputs;
    return;
  }
  var name = "point" + currentInput;
  var $input = $("<input type='text' class='form-control' name='" + name + "' ng-show='" + name + "'>");


  $(".form-group").append($input);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <span><button onclick="addOne()">Add One</button></span>
</div>

＆＃13;

从一定数量的文本字段中单击显示一个文本字段

6 个答案: