Angular.jsを使って、入力フォームの項目をユーザーが増やしたり減らしたりできるようにしてみます。
サンプルコード
数の変動するinput部分はng-repeatで表示するようにして、ng-repeatで使用する配列の数を増やしたり減らしたりすることで、inputの数を変更するようにします。
HTML
1 2 3 4 5 6 7 8 9 10 | <div ng-controller="ctrl"> <dl ng-repeat="input in inputData"> <dt>連絡先{{$index + 1}}</dt> <dd> <input name="input{{$index}}" ng-model="input.value" type="text"> <a href="" ng-click="del($index)">削除</a> </dd> </dl> <div><a href="" ng-click="add()">追加</a></div></div> |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 | angular.module('app', []).controller('ctrl', function($scope) { $scope.inputData = [ { 'value': '初期値サンプル' } ]; $scope.del = function(index) { $scope.inputData.splice(index, 1); } $scope.add = function() { $scope.inputData.push({'value':''}); }}); |
サンプルコード2
上記のサンプルだとinputがいくつでも追加できてしまうので、上限数を設定してみます。
追加ボタンにng-hideを設定して、上限数になったらボタンを非表示にします。
HTML
1 2 3 4 5 6 7 8 9 10 | <div ng-controller="ctrl"> <dl ng-repeat="input in inputData"> <dt>連絡先{{$index + 1}}</dt> <dd> <input name="input{{$index}}" ng-model="input.value" type="text"> <a href="" ng-click="del($index)">削除</a> </dd> </dl> <div ng-hide="inputData.length >= max"><a href="" ng-click="add()">追加</a></div></div> |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | angular.module('app', []).controller('ctrl', function($scope) { $scope.inputData = [ { 'value': '初期値サンプル' } ]; $scope.del = function(index) { $scope.inputData.splice(index, 1); } $scope.add = function() { $scope.inputData.push({'value':''}); } // input追加の上限数 $scope.max = 5;}); |
コメントが承認されるまで時間がかかります。