AngularJS textarea输入具有自动完成功能的密钥提交表单

时间:2015-03-04 10:20:14

标签: javascript angularjs forms autocomplete angularjs-directive

您好我想在我的文字aera中输入时提交我的表格。

我的textarea有一个在angularjs指令中创建的自动完成表单(autocompleteAngularExpression)

我试过这个:

<textarea ng-keyup="$event.keyCode == 13 && submit()" 
id="inputId" autocomplete-angular-expression> 
</textaera>

问题是,当我按下输入我的textarea的自动完成时,我提交表格。

如果显示自动填充表单,我该如何提交表单?

我的指示有点复杂。

在范围内我有未解析的值

 directive('autocompleteAngularExpression', ['_', '$', function(_, $) {

        function split(val) {
            return val.split( /\s+/ );
        }

        function extractLast(term) {
            return term.split(/[()-\s]+/).pop();
        }

        return {
            require: 'ngModel',
            scope: {
                indexed : "=indexedValue",
                nonIndexedValue : "=nonIndexedValue"
            },
            link: function(scope, element, attrs, ngModel) {

                function containsSomeIndexed(words) {
                    return _.some(words, function(word) {
                        return _.contains(scope.indexedValue, word);
                    });
                }

                ngModel.$parsers.unshift(function(expression) {
                    if (!expression || expression === "") {
                        ngModel.$setValidity('indexValid', true);
                    } else {
                        ngModel.$setValidity('indexValid', containsSomeIndexed(expression.split(/[()-:\s]+/)));
                    }
                    return expression;
                });

                element.autocomplete({
                    minLength: 1,
                    source: function(request, response) {
                        var sourceList;
                        if (containsSomeIndexed(request.term.split(/[()-:\s]+/))) {
                            sourceList = _.union(scope.indexedValue, scope.nonIndexedValue);
                        } else {
                            sourceList = scope.indexedValue;
                        }
                        response($.ui.autocomplete.filter(sourceList, extractLast(request.term)));
                    },
                    focus: function() {
                        return false;
                    },
                    select: function(event, ui) {
                        var selectedValue = ui.item.value;
                        var terms = split(this.value);
                        var partial = terms.pop();
                        var prependBuffer = "";
                        while (partial.charAt(0) === '(' || partial.charAt(0) === '-') {
                            prependBuffer = prependBuffer + partial.charAt(0);
                            partial = partial.substring(1, partial.length);
                        }
                        terms.push(prependBuffer + selectedValue);
                        return false;
                    }
              });
            }
        };
    }]).

1 个答案:

答案 0 :(得分:14)

每次都在指令$event.keyCode == 13上写ng-enter,而不是<textarea ng-enter="submit()" id="inputId" autocomplete-angular-expression> </textaera> , 这将为你做到这一点。

尝试

ngEnter

添加此指令以获取app.directive('ngEnter', function() { return function(scope, element, attrs) { element.bind("keydown", function(e) { if(e.which === 13) { scope.$apply(function(){ scope.$eval(attrs.ngEnter, {'e': e}); }); e.preventDefault(); } }); }; });

{{1}}

Reference Link