如何在用户类型仅'@'时实现 AngularJS TypeAhead

Question

当用户在文本区域中键入"@"时，我希望将一些值显示为建议。我使用了typeahead指令，但它显示了在文本区域中输入的macthing值的建议。我只想在用户键入"@"时显示。请告诉我。

Answer 1

我们不得不为'@@'创建这样一个typeahead。

也许可以使用Bootstrap UI Typeahead。您只需要创建自己的过滤器，并检查输入是否包含您的"@"。

如果你想完全自己创建它，那么你需要一个ngModel变量的观察者。如果用户确实输入了stg，请检查@并显示/隐藏您的typeahead。

html必须使用scope进行$编译，并在您的文本字段之后注入。

var template = angular.element(
          '<ul class="dropdown-menu typeahead">' +
          '<li data-ng-repeat="match in arrMatches = (matches | filter:matchTypeAheadFilter)" ng-class="{'active':selectedMatch==match}" >' +
          '<a data-ng-bind="match" data-ng-click="injectMatch(match);"></a>' +
          '</li >' +
          '</ul>');
$compile(template.contents())(scope);
$(element).after(template);

现在这个模板就是typeahead容器。

每个li代表一个匹配。

scope.$watch("ngModel", function (newValue,oldValue)
{
   if(newValue.indexOf('@') > -1)
    scope.openTypeAhead(newValue);
});

在openTypeAhead中，您需要逻辑来显示容器，应用click+key事件。

scope.openTypeAhead = function(inputValue){            
          var firstTimeOpen = $(template).css("display") == "none";
          if(firstTimeOpen)
          {
            $(element).keydown(keyEvents);
            $(document).click(onClick);
          }
          $(template).show(); //show typeahead
          scope.matches = //load your matches
        }else{
          scope.hideTypeAhead();
        }
      };

我向你建议这个框架。因为这不是简单的。