文本框使用angularjs自动填充到ng-form标签内

时间:2015-01-08 13:19:39

标签: angularjs-directive angularjs-ng-form

当用户选择文本框选项时,它会动态生成文本框并将其附加到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++;
                    }  
                }
               
            }
        });
&#13;
<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

抱歉,我没有声誉发表评论,您正在生成文本字段和数字更多    比一次使用相同的 ng-model 名称,所以它共享相同的范围,所以它生成相同    value具有以前的文本字段。