使用对象名称预先输入 [英] Typeahead using object name

问题描述

我正在尝试使用 AngularJS & 设置 typeaheadUI 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

这篇关于使用对象名称预先输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！