Question

我正在尝试创建一个功能，该功能将自动检测用户是否输入了“@”符号，并将使用公司域自动填充该字段。页面上可能有多个字段，这就是我不想对其模型进行硬编码的原因（例如$scope.user.email）。
这是'到目前为止我所得到的：

<input ng-model="user.email" ng-keyup="autocompleteEmail($event);">

相应的控制器代码：

$scope.autocompleteEmail = function($event) {
    if (($event.keyCode === 48 || $event.keyCode === 50) && $event.srcElement.value.slice(-1) === "@") {
      // @ symbol is typed - completing email
      $event.srcElement.value += "mycompany.com";
    }
}

自动填充功能正常，但只要我尝试使用此新值提交表单时问题就会出现 - 它没有考虑我自动添加的 mycompany.com 域名。正在发送的请求已user.email = test@。

如何使用AngularJS实现此自动完成功能？

Answer 1

为了使其尽可能通用，您可以采用指令方法。见Plunker

myApp.directive('completeEmailDomain', function(){  
 return {
    scope: {
       domain: '@',
       email: '='
    },
     restrict: 'E',
     template: '<input ng-model="email" ng-keyup="autoCompleteEmail($event);" />',
     link: function($scope, elem, attr) {
          $scope.autoCompleteEmail = function($event){
            console.log($scope.email);
            if (($event.keyCode === 48 || $event.keyCode === 50) && $event.srcElement.value.slice(-1) === "@") {
              $scope.email += $scope.domain;
            }
          }
     } 
 }; 
});

在那里，我创建了一个名为＆＃34; complete-email-domain＆＃34;的指令。它会接收域名和电子邮件，并会在用户输入“＆＃39;”后自动更新模型。这应该是完全可重用的，并且应该将更改值的实际处理范围限定为新指令。

或许改进只是将域存储在用户对象上并将用户传递给指令。然后你就可以访问＆＃34;域＆＃34;和＆＃34;电子邮件＆＃34;属性非常相似。

Answer 2

您可以将user变量作为参数传递给方法，以便可以重复使用：

 <input ng-model="user.email" ng-keyup="autocompleteEmail($event, user);">

并注意该参数：

  $scope.autocompleteEmail = function($event, user) {
       if (($event.keyCode === 48 || $event.keyCode === 50) &&        $event.srcElement.value.slice(-1) === "@") {
  // @ symbol is typed - completing email
  user.email  += "mycompany.com";
}

试试这个plunker

在AngularJS输入

2 个答案: