繁体   English   中英

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

[英]AngularJS textaera enter key submit form with autocomplete

您好我想在我的文字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;
                    }
              });
            }
        };
    }]).

而不是每次写指令ng-enter时都要执行$event.keyCode == 13 ,这样就可以解决问题。

尝试

<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();
            }
        });
    };
});

参考链接

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM