Angularjs 在某些字符上显示有角度的UI类型

我想使用Angular UI typeahead指令来做一些类似于Twitter的Tweet composer的事情：仅当用户输入某个字符（如@或{）时才显示它，并且当选择了匹配项时，只附加所选的值，而不是替换整个模型

---

当前的Angular UI实现是否可行？

我认为这不是现成的，但typeahead API允许指定自定义的get和format函数

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

HTML:

控制器：

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。您可以在此处使用任何令牌匹配方案。这只是一个示例：

---

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

您需要做的只是：

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

---

有了这个解决方案，你只能使用“足够的公平”，但是扩展它是很容易的。只要使用Val.ListPixOxOf。好方法，但是如果你键入StrueYEP的中间，这可能是奇怪的，这可能是我的方法的结束。根据你的解决方案来获取指令和一些讨厌的插入符号的时间。希望它有帮助。不过有一点。在我开始使用uib typeahead之前，这对我来说是有效的，现在它覆盖了文本框中的内容，而不是添加到文本框中。你知道我可能需要做哪些更改才能让它重新工作吗？我使用的是AngularJS v1.4.8和angular ui引导版本：0.14.3实际上，这可能是绑定而不是typeahea的问题d本身。我有一个绑定到模型的动态加载表单，其中一个字段使用typeahead，当我从typeahead的列表中选择一个选项时，它会覆盖模型中的值-但是文本框中的文本看起来很好，也就是说，它按预期添加到了末尾。非常奇怪！如果您想要你在帮我吗？

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