0

ユーザーがテキストボックスオプションを選択すると、テキストボックスが動的に生成され、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>

4

1 に答える 1