Bootstrap -UI typeahead 在结果列表中显示超过 1 个字段

Question

所以，我在这个问题上遇到了同样的问题

Bootstrap-UI Typeahead display more than one property in results list?

而且，我已经根据我的链接和需求修改了 plunker

http://plnkr.co/edit/FdkvCUUD3ob7dt256Bgd?p=preview

但是后来，我意识到他们使用的是 angular-ui 的 0.5 版本，以及 angular 1.0.5

在我的项目中，我使用的是 angular 1.4.9 和 anguilar-ui 1.3.3 但不知何故，我的结果没有显示或显示为未定义

控制器

app.controller('testController', ['$scope', function ($scope) {
    $scope.sites = JSON.parse("[{\"SITE_CODE\":\"CODE1\",\"SITE_NAME\":\"NAME1\",\"ADDRESS\":\"\"},{\"SITE_CODE\":\"CODE2\",\"SITE_NAME\":\"NAME2\",\"ADDRESS\":\"\"},{\"SITE_CODE\":\"CODE3\",\"SITE_NAME\":\"NAME3\",\"ADDRESS\":\"\"},{\"SITE_CODE\":\"CODE4\",\"SITE_NAME\":\"NAME4\",\"ADDRESS\":\"\"}]");
}]);

HTML

<div class="row">
        <div class="col-xs-4">
            <div class="typeahead">
                <input type="text" class="form-control" ng-model="test" uib-typeahead="site as site.SITE_CODE for site in sites"
                       typeahead-no-results="noResults" typeahead-popup-template-url="siteList.html" />
            </div>
        </div>
    </div>
    <div class="row" ng-show="noResults">
        <div class="col-sm-6">
            <i class="glyphicon glyphicon-remove"></i> No Results Found
        </div>
    </div>
</div>
<script type="text/ng-template" id="siteList.html">
    <div class="row">
        <a tabindex="-1">
            <div class="col-xs-4">
                <span ng-bind-html-unsafe="match.model.SITE_CODE | typeaheadHighlight:query"></span>
            </div>
            <div class="col-xs-4">
                <span ng-bind-html-unsafe="match.model.SITE_NAME | typeaheadHighlight:query"></span>
            </div>
        </a>
    </div>
</script>

知道我错过了什么吗？

Answer 1

傻我，我才发现我的问题

我设置的是 typeahead-popup-template-url 而不是 typeahead-template-url

进行此更改并将 ngSanitize 添加到我的模块后，一切都比预期的要好。

现在，我需要找出一种显示结果总数的方法，因为我将只显示结果数量的一小部分

Bootstrap -UI typeahead 在结果列表中显示超过 1 个字段

Bootstrap -UI typeahead showing more than 1 field on the results list

javascript

twitter-bootstrap

angularjs

angular-ui-bootstrap