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

问题描述

我试图安装一个预输入使用 AngularJS ＆安培; UI引导的，像这样：

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"
                }
               ]

目前，我已经能够更新所选择的名称的模式，但我的目标是沿着通过预输入整个对象传递。有没有干净的方式做到这一点只用输入？

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/ 的预输入指令使用相同的超 - 灵活的语法，AngularJS 选择指令为 NG-选项。所以，你可以写：

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"

下面是一个工作普拉克：<一href=\"http://plnkr.co/edit/5kGZkNPZ7rIFfb4Rvxej?p=$p$pview\">http://plnkr.co/edit/5kGZkNPZ7rIFfb4Rvxej?p=$p$pview

Here is a working plunk: http://plnkr.co/edit/5kGZkNPZ7rIFfb4Rvxej?p=preview

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