UI Bootstrap Typeahead 不在 ng-model 中存储选择答案

【问题标题】：UI Bootstrap Typeahead doesn't store selection in ng-modelUI Bootstrap Typeahead 不在 ng-model 中存储选择
【发布时间】：2016-04-15 06:36:42
【问题描述】：

好的，我正在使用 Ui-Bootstrap typeahead (https://angular-ui.github.io/bootstrap/#/typeahead)。

我正在为数据使用 firebase 数组。

当我开始输入它时，我已经得到它过滤结果，我可以单击一个。

但是，当我单击它时，它似乎没有将所选值存储在模型中。

我做错了什么？

我只想在选择它后将其保存在 ng-model 中。

<pre>{{newLink | json}}</pre>

<input type="text" ng-model="newLink" placeholder="Search for Pages" uib-typeahead="title as page.title for page in admin.content | filter: {title: $viewValue}" typeahead-show-hint="true" class="form-control"/>

我的数据看起来像这样（缩短）

...
{
   title: 'Home',
   url: 'home',
   published: true,
   html: ''
 }
 ...

这是一个简短的视频，准确地展示了我的问题：https://www.dropbox.com/s/nt2c5wxx9lbuy5v/Problem%201.mov?dl=0

更新

如果我将上面uib-typeahead 中的title as page.title for page in admin.content 更改为page.title for page in admin.content。一切都像预期的那样工作 EXCEPT ng-model 只代表标题而不是数组。我真的需要 firebase uid 和标题。

更新 2

如果我再次将 uib-typeahead 更改为 page for page in admin.content，我会在 ng-model 中得到我想要的，除了 typeahead 选项被列为 [object Object]。

【问题讨论】：

我从未使用过该指令，但您确定它支持ng-model 的非字符串值吗？
查看问题中列出的文档链接。看起来演示正在做我希望它对我的代码做的事情。
page.title as page for page in admin.content 呢？
@Lex -- 将标题存储在 ng-model 中，仍然显示 [object Object] 作为选项。
我的错，我倒退了。 page as page.title for page in admin.content。格式为“[您要存储的值] 作为 [您要显示的文本] 用于 [集合] 中的 [每个集合项]”。

标签： angularjs twitter-bootstrap angular-ui-bootstrap typeahead

【解决方案1】：

按照要求，这完全是正确构建 select 指令的问题，我们能够弄清楚它应该是：

<input  type="text" 
        ng-model="newLink" 
        placeholder="Search for Pages" 
        uib-typeahead="page as page.title for page in admin.content | filter: {title: $viewValue}" 
        typeahead-show-hint="true" 
        class="form-control"/>

【讨论】：