问题描述
我正在尝试使用 AngularJS & 设置 typeahead
UI Bootstrap 像这样:
I'm trying to setup a typeahead
using AngularJS & UI Bootstrap like so:
.html
<input type="text" ng-model="selectedStuff" typeahead="stuff.name for stuff in stuffs | filter:$viewValue"/>
<span>{{selectedStuff.name}}</span>
<span>{{selectedStuff.desc}}</span>
.js
$scope.stuffs= [
{
"name":"thing1",
"desc":"this is the first thing"
},
{
"name":"thing2",
"desc":"this is the second thing"
}
]
目前,我已经能够使用选定的名称更新模型,但我的目标是通过 typeahead
传递整个对象.有没有一种干净的方法可以只使用输入来做到这一点?
Currently, I've been able to update the model with the selected name, but my goal is to pass along the entire object via the typeahead
. Is there a clean way to do this using only the input?
推荐答案
当然 :-)
来自 http://angular-ui.github.io/bootstrap/ 的 typeahead 指令使用相同的 super- 灵活的语法作为 AngularJS select 指令 用于 ng-options
.所以你可以写:
The typeahead directive from http://angular-ui.github.io/bootstrap/ uses the same super-flexible syntax as the AngularJS select directive for ng-options
. So you could write:
typeahead="stuff as stuff.name for stuff in stuffs | filter:$viewValue"
这是一个有效的 plunk:http://plnkr.co/edit/5kGZkNPZ7rIFfb4Rvxej?p=preview
Here is a working plunk: http://plnkr.co/edit/5kGZkNPZ7rIFfb4Rvxej?p=preview
这篇关于使用对象名称预先输入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!