Question

我想使用Angular-UI typeahead指令来执行类似Twitter的Tweet编辑器的操作：仅在用户输入某个字符时显示它，例如 @ 或 { ，并且当选择匹配时，仅附加所选值，而不是替换整个模型。

目前的Angular-UI实现是否可行？

Answer 1

这是我使用自定义指令实现的：

http://plnkr.co/edit/9eEq6fOZgVWlhBqUXpV5?p=preview

您需要做的就是：

 <input type="text" ng-model="model"
    typeahead-on="{" typeahead-append="}"
    typeahead="suggestion for suggestion in ['second', 'minute', 'hour', 'day','week', 'month', 'year']" />

Answer 2

我不认为这是开箱即用的，但是typeahead API允许指定自定义get和format函数。

Here is a Plunker松散地基于angular-ui文档中的异步示例。我的版本仅在输入值中存在@符号时启动。然后使用@符号后面的子字符串执行自定义搜索。

HTML：

<input type="text" ng-model="selected" typeahead="address for address in getLocation($viewValue)" typeahead-input-formatter="formatResult($model)" class="form-control">

控制器：

var prefix = "";

$scope.getLocation = function(val) {

  var pos = val.indexOf("@");

  if(pos <=0 || pos == val.length-1) {
    return []; 
  }

  prefix = val.substr(0,pos); //cache the prefix
  var search = val.substr(pos+1); //get the search string

  //filter the results
  return $filter('filter')(states, search)
};

$scope.formatResult = function(model) {
  if(!model) {
    return prefix;
  }
  return prefix + "@"+model;
}

<强>更新更新了plunk，允许多个令牌。您可以在此处使用您想要的任何令牌匹配方案。这只是一个例子： http://plnkr.co/edit/RjSZ2wgI1POtNfbQ6tvy?p=preview

Angular-UI typeahead在某些角色上显示

2 个答案: