Angular.jsで入力エリアの追加や削除をする

Angular.jsを使って、入力フォームの項目をユーザーが増やしたり減らしたりできるようにしてみます。

サンプルコード

数の変動するinput部分はng-repeatで表示するようにして、ng-repeatで使用する配列の数を増やしたり減らしたりすることで、inputの数を変更するようにします。

HTML

<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

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を追加・削除するデモページ
　

サンプルコード2

上記のサンプルだとinputがいくつでも追加できてしまうので、上限数を設定してみます。
追加ボタンにng-hideを設定して、上限数になったらボタンを非表示にします。

HTML

<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

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

上限数設定のデモページ