AngularJS - 带有 Angular UI Bootstrap 的指令

Question

我正在使用 Angular UI - Bootstrap，特别是 Typeahead 指令。 http://angular-ui.github.io/bootstrap/#/typeahead

我正在尝试使用“typeahead-template-url”为我的建议框创建自定义 html 模板。在尝试了多种技术但均未成功后，我发现故意弄乱我的引号“解决了”显示问题。我很想了解为什么会出现这种情况并让它正常工作。

例如：这行得通

<table class="> <!--see class quote error -->
<tr>
    <td>
        <div ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)">
            <a>ID{{ match.model.id }} - {{ match.model.text }}</a>
        </div>
    </td>
</tr>
</table>

这行不通

<table class="">
<tr>
    <td>
        <div ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)">
            <a>ID{{ match.model.id }} - {{ match.model.text }}</a>
        </div>
    </td>
</tr>
</table>

FIDDLE 在这里：http://jsfiddle.net/nicktest222/JXtaZ/24/

此外，当您在结果列表中选择一个项目时，它会返回整个对象。如何让它返回对象中的特定属性？

任何帮助将不胜感激。

谢谢

Answer 1

我认为这是您在 JSFiddle 中添加模板（columnTwo.html）的方式。

看看我的演示（基于你的）：http://jsbin.com/aMOrOra/1/edit?html,js,output

关于 typeahead 属性：

<input type="text" ng-model="monkey" typeahead-template-url="columnTwo.html" typeahead="suggestion as suggestion.text for suggestion in sample_data | filter: $viewValue" />

这里表示将建议对象用作选定值，但我只想在框中显示建议.text 属性。但是猴子仍然会被设置为选定的建议对象。

您知道，您当前的过滤器将查找关于建议对象的每个属性的查询，而不仅仅是文本。

编辑：要仅过滤文本属性，请使用如下过滤器：

filter:{'text':$viewValue}