設定された数のテキストフィールドからクリックすると1つのテキストフィールドが表示されます

ユーザーが10のテキストフィールドを持つフォームがあります。しかし、最初は1つのテキストフィールドしか表示されません。ユーザーがより多くのデータを入力する必要がある場合、それらは1つのボタンを追加をクリックし、そのように10設定された数のテキストフィールドからクリックすると1つのテキストフィールドが表示されます

の最大値から次のテキストフィールドを表示することができますでの作業

イムangular.jsなので、ng-showを使用して&の表示フィールドを非表示にすることを考えました。

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

これを行う最も効果的な方法を理解することはできません。ヒント、助け、提案は素晴らしいでしょう。

出典

2016-04-06 Skywalker

あなたが実行可能なデモ/スニペットまたは[JSFiddle]（https://jsfiddle.net/）を共有することはできますか？ – Rayon

ng-repeatはどうですか？ – digglemister

ng-repeatと変数は、ユーザーがフィールドを追加するたびに増加します。変数を$ index引数でテストし、フィールドを表示します。 – Iansen

を、私はng-repeatを使用することをお勧めします。ここでは、あなたが探している正確に何ではないかもしれませんフィドルだが、それはNG・リピートを使用するために、必要に応じて変更する方法を示しています。

フィドル：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にプッシュするだけです。

出典

2016-04-06 11:09:08 digglemister

お返事ありがとうございました。私は今それをテストし、それに応じて更新します – Skywalker

私はあなたの答えを使用して終了しました。それは完全に機能していましたが、 '$ index'を' splice'を使って配列から削除する別の関数に渡そうとしましたが、スプライス後に残りの配列が壊れてしまいました。 – Skywalker

あなたは簡単に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()); 
});

出典

2016-04-06 11:01:02

おそらく良い方法は、入力フィールドの配列を作ることで、その後、NG-繰り返し、それらを。ユーザーがAddOneをクリックすると、入力フィールドを配列にプッシュするだけで、そこに表示されます。

出典

2016-04-06 11:01:58 Jassma

はそれをテストしていませんが、これは、私はそれを行うだろうかです：

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

出典

2016-04-06 11:07:38 Iansen

お返事ありがとうございました。私は今それをテストし、それに応じて更新します。 – Skywalker

-1

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

出典

2016-04-06 11:08:49 Deepanjan

-2

addOne()メソッドで入力を追加するためにJQueryを使用できます。そのよう

：

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

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

出典

2016-04-06 11:11:07

設定された数のテキストフィールドからクリックすると1つのテキストフィールドが表示されます

答えて

関連する問題