ユーザーがテキストボックスオプションを選択すると、テキストボックスが動的に生成され、div otc-dynamic に追加されます。問題は、複数のテキストボックスオプションを選択し、テキストボックスのいずれかを入力すると、すべてのテキストボックスがいっぱいになり始めることです。 ....私はそれを止めたい..事前に jsfiddle: http://jsfiddle.net/nilamsavani/n2nqkcn8/
app.directive("otcDynamic", function ($compile) {
var i = 1;
return {
link: function ($scope, $element) {
$scope.add = function () {
$scope.myVar = false;
if ($scope.filter.country == 'TextBox') {
str = "<ng-form name='form'><span>Text: </span><input type='text' placeholder='Answer' id='" + i + "' ng-model='txt' name='input' required /><div class='validation_error' data-ng-show='form.input.$error.required' style='color: red'>Can't be empty.</div></ng-form>"
} else if ($scope.filter.country == 'Number') {
str = "<ng-form name='form1'><span>Number: </span><input type='number' placeholder='Answer' ng-model='num' required ng-minlength='3' name='inumber' id='" + i + "'/><div class='validation_error' data-ng-show='form1.inumber.$error.required' style='color: red'>Number required.</div></ng-form>"
} else if ($scope.filter.country == 'Select') {
}
alert(str);
el = $compile(str)($scope);
$element.parent().append(el);
i++;
}
}
}
});
<div ng-controller="mainController">
<form name="myForm" novalidate>
<%-- {{ message }}--%>
<div otc-dynamic></div>
<select ng-model="filter.country" ng-change="add()">
<option value="">Select</option>
<option value="TextBox">TextBox</option>
<option value="Number">Number</option>
</select>
<input type="button" ng-hide='myVar' value="Submit" ng-click="check()" />
</form>
</div>