Javascript 从一组文本字段中单击显示一个文本字段
我有一个表单，其中用户有10个文本字段。但最初只显示1个文本字段。如果用户需要输入更多数据，可以单击“添加一个”按钮，然后显示最多10个文本字段中的下一个文本字段 像这样： 我正在使用angular.js，所以我考虑使用ng show来隐藏和显示字段Javascript 从一组文本字段中单击显示一个文本字段,javascript,angularjs,html,Javascript,Angularjs,Html,我有一个表单，其中用户有10个文本字段。但最初只显示1个文本字段。如果用户需要输入更多数据，可以单击“添加一个”按钮，然后显示最多10个文本字段中的下一个文本字段 像这样： 我正在使用angular.js，所以我考虑使用ng show来隐藏和显示字段 <div class="form-group"> <input type="text" class="form-control" name="pointOne" ng-show="pointOne"> <input
<div class="form-group">
<input type="text" class="form-control" name="pointOne" ng-show="pointOne">
<input type="text" class="form-control" name="pointTwo" ng-show="pointTwo">
<input type="text" class="form-control" name="pointThree" ng-show="pointThree">
<span><button ng-click="addOne()">Add One</button></span>
</div>
加一
我想不出最有效的方法。任何提示、帮助或建议都很好。您可以轻松地向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());
});
可能最好的方法是创建一个输入字段数组，然后重复它们。当用户单击AddOne时，只需按数组中的输入字段，它就会出现。尚未对其进行测试，但我会这样做：
<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>
jQuery添加/删除文本框
div{
填充：8px；
}
jQuery添加/删除文本框示例
$（文档）.ready（函数（）{
var计数器=2；
$（“#添加按钮”）。单击（函数（）{
如果（计数器>10）{
警报（“仅允许10个文本框”）；
返回false；
}
var newTextBoxDiv=$（document.createElement（'div'））
.attr（“id”，“TextBoxDiv”+计数器）；
newTextBoxDiv.after（）.html（'Textbox#'+计数器+'：'+
'');
newTextBoxDiv.appendTo（“#textboxsgroup”）；
计数器++；
});
$（“#移除按钮”）。单击（函数（）{
如果（计数器==1）{
警报（“不再需要删除文本框”）；
返回false；
}
计数器--；
$（“#TextBoxDiv”+计数器）.remove（）；
});
$（“#getButtonValue”）。单击（函数（）{
var msg=''；
对于（i=1；i要走有角度的路线，我建议使用ng repeat
。这里有一把小提琴可能不是您想要的，但它展示了如何使用ng repeat，您可以根据需要进行修改：
小提琴：
当您需要一个新的
时，只需将新元素推送到$scope即可。random_array
JQuery可用于在addOne（）
方法中添加输入
像这样：
var maxInputs=10；
var currentInput=0；
函数addOne（）{
currentInput++；
如果（currentInput>maxInputs）{
currentInput=maxInputs；
返回；
}
var name=“point”+当前输入；
变量$input=$（“”）；
$（“.form group”）.append（$input）；
}
加一
你能分享可执行的演示/代码片段吗？ng repeat怎么样？ng repeat和一个变量，每次用户添加一个字段时你都会递增。然后测试$index以显示该变量。@snookie或者你能提供一个例子吗？@lansen你能提供一个例子吗？非常感谢你的回答。我会测试它现在退出并相应更新。非常感谢您提供的答案。我现在将测试它，并根据您的答案进行更新。它工作得很好，我还尝试将$index
传递给另一个函数，该函数使用splice
从数组中删除文本字段，但在拼接之后，它会弄乱剩余的数组.
$scope.number = 10;
$scope.getNumber = function(num) {
return new Array(num);
}
$scope.counter=0;
$scope.addOne= function() {
$scope.counter++;
}
<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>
<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)
}
}]);