angularjs-directive - 使用 angularjs 自动填充文本框在 ng-form 标记内

Question

当用户选择文本框选项时，它将动态生成文本框并将其附加到 div otc-dynamic..现在的问题是，如果我选择多个时间文本框选项并输入任何一个文本框，所有文本框开始填充....我想提前停止..thnx 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>

Answer 1

抱歉，我没有发表评论的声誉，您正在生成具有相同ng-model名称的文本字段和编号，因此它共享相同的范围，因此它以相同的值生成具有先前的文本字段。