Angular-UI typeahead：显示标签但仅绑定到值

AngularJS

Angular-UI typeahead：显示标签但仅绑定到值

Angular-UI typeahead是一个强大的AngularJS指令，用于实现自动完成功能。它可以根据用户的输入动态地显示匹配的选项，并且可以绑定到一个值，以便在用户选择一个选项时更新该值。

在某些情况下，我们希望在typeahead中显示标签，但是只将选定的值绑定到模型中。这意味着在typeahead中显示的选项将是用户友好的标签，但是在背后，我们只关心与该标签相关联的实际值。

为了实现这个功能，我们可以使用Angular-UI typeahead的模板选项。通过指定一个自定义的模板，我们可以控制typeahead中每个选项的显示方式。我们可以在模板中使用HTML和AngularJS表达式来自定义每个选项的外观。

下面是一个简单的例子，演示了如何使用Angular-UI typeahead来显示标签但仅绑定到值：

html
<input type="text" ng-model="selectedValue" typeahead="item as item.label for item in items | filter:$viewValue">

在这个例子中，我们有一个输入框，它的值将与模型中的selectedValue绑定。我们使用typeahead指令来实现自动完成功能。typeahead的表达式部分是"item as item.label for item in items | filter:$viewValue"。这个表达式告诉typeahead将每个item的label属性显示为选项的标签，并将整个item对象绑定到模型中。

为了在typeahead中只显示标签，我们可以修改模板选项来自定义每个选项的显示方式。我们可以使用ng-bind指令来绑定每个选项的标签属性，而不是整个选项对象。这样，只有标签将显示在typeahead中，而实际值将保存在模型中。

下面是修改后的例子，展示了如何显示标签但仅绑定到值：

html
<input type="text" ng-model="selectedValue" typeahead="item as item.label for item in items | filter:$viewValue" typeahead-template-url="templates/typeahead-template.html">

在这个例子中，我们添加了一个typeahead-template-url属性，它指定了一个自定义的模板文件。在该模板文件中，我们可以使用ng-bind指令来只绑定每个选项的标签属性。

html
<!-- templates/typeahead-template.html -->
<div>
  
</div>

通过使用自定义模板，我们可以更好地控制typeahead中每个选项的显示方式。在上面的例子中，我们使用了一个简单的div包装，并使用ng-bind指令将item的label属性绑定到一个链接元素上。这样，只有标签将显示在typeahead中，而实际值将被绑定到模型中。

使用自定义模板显示标签的typeahead

在上面的例子中，我们演示了如何使用自定义模板来显示标签但仅绑定到值的typeahead。通过修改typeahead的模板选项，我们可以控制每个选项的显示方式，从而实现我们想要的效果。

这种方法非常灵活，适用于各种不同的需求。无论是在电子商务网站中显示商品名称，还是在用户管理系统中显示用户姓名，我们都可以通过使用自定义模板来实现显示标签但仅绑定到值的typeahead。

：

Angular-UI typeahead是一个非常有用的AngularJS指令，用于实现自动完成功能。通过使用自定义模板，我们可以控制typeahead中每个选项的显示方式。通过只绑定每个选项的标签属性，我们可以在typeahead中显示标签，但只将实际值绑定到模型中。

这种方法使得typeahead更加灵活和定制化，适用于各种不同的应用场景。无论是在电子商务网站中搜索商品，还是在博客系统中搜索文章标签，我们都可以使用Angular-UI typeahead来实现自动完成的功能。

希望本文对你理解和使用Angular-UI typeahead有所帮助，并能在你的项目中发挥作用。