Question

我对AngularJS很新，我在理解select指令的工作原理方面遇到了一些麻烦（Official doc）。

我在http://angular-ui.github.io/bootstrap/（页面底部）使用了bootstrap UI示例来创建实时搜索。

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html ng-app="myApp">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
        <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
        <script>
            angular.module('myApp', ['ui.bootstrap']);
            function searchCtrl($scope, $http) {
                $scope.json = [{"symbol":"AA","name":"Alcoa Inc. "},{"symbol":"AAALF","name":"Aareal Bank AG "},{"symbol":"AAALY","name":"Aareal Bank AG Unsponsored American Depository Receipt (Germany)"},{"symbol":"AAARF","name":"Aluar Aluminio Argentino Sa Alua "},{"symbol":"AABB","name":"Asia Broadband Inc "},{"symbol":"AABGF","name":"Agrana Beteiligungs Ag "},{"symbol":"AABNF","name":"Altin Ag Baar Namen"},{"symbol":"AABVF","name":"Aberdeen International Inc "},{"symbol":"AACAF","name":"AAC Technologies Holdings Inc "},{"symbol":"AACAY","name":"AAC Technologies Holdings Inc Unsponsored ADR (Cayman Islands)"},{"symbol":"AACEY","name":"Asia Cement (China) Holdings Corp. Unsponsored ADR (Cayman Islands)"},{"symbol":"AACMZ","name":"Asia Cement Corp Global Depositary Receipts 144A (Taiwan)"},{"symbol":"AACS","name":"American Commerce Solutions, Inc. "},{"symbol":"AACTF","name":"ACT Aurora CTL Technologies Corp "},{"symbol":"AADG","name":"Asian Dragon Group, Inc. "},{"symbol":"AADR","name":"WCM BNY Mellon Focused Growth ADR ETF"},{"symbol":"AAEEF","name":"Altair Gold, Inc. "},{"symbol":"AAEH","name":"All American Energy Holding, Inc. "},{"symbol":"AAGC","name":"All American Gold Corp. "},{"symbol":"AAGH","name":"Asia Global Holdings Corp. "},{"symbol":"AAGIY","name":"AIA Group, Ltd. Sponsored American Depository Receipt (Hong Kong)"},{"symbol":"AAGLF","name":"Aurora Oil & Gas Ltd "},{"symbol":"AAGLY","name":"Aurora Oil & Gas Ltd Unsponsored ADR (Australia)"},{"symbol":"AAGRY","name":"Astra Agro Lestari TBK PT Unsponsored ADR (Indonesia)"}]
            };


        </script>
    </head>
    <body> 
        <script type="text/ng-template" id="quotes_local.html">
            <a>
                    <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
                </a>
      </script>
        <div class='container' ng-controller="searchCtrl">       
            <input type="text" ng-model="customSelected" placeholder="Custom template" typeahead="quote.symbol as quote.name for quote in json | filter:{$: $viewValue} | limitTo:8" typeahead-template-url="quotes_local.html" class="form-control">
       </div>
    </body>
</html>

另见plunker

目前，当我开始输入时，它会搜索公司名称，当我选择公司时，它会在字段中写入其符号。

我想做的是搜索公司名称和符号名称。在模板中，它应显示：符号 - 公司名称，并在符号和公司名称都需要时突出显示。

Answer 1

您只需要在模板中添加符号字符串并输入下拉列表中的符号：

<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>

变为：

{{ match.model.symbol }} - <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>

并将符号添加到typehead：

typeahead="quote.symbol as quote.name for quote in json | filter:{$: $viewValue} | limitTo:8"

变为：

typeahead="quote.symbol + ' - ' + quote.name as quote.name  for quote in json | filter:{$: $viewValue} | limitTo:8"

heres the plunker

Answer 2

您需要做的就是specify a string concatenation of symbol and name separated with a dash in your input's typeahead指令：

typeahead="quote.symbol as quote.symbol + ' - ' + quote.name for quote in json | filter:{$: $viewValue} | limitTo:8" typeahead-template-url="quotes_local.html" class="form-control">
                           |_______________________________|

所以，typehead的第一部分：

quote.symbol as quote.name for quote in json

变为：

quote.symbol as quote.symbol + ' - ' + quote.name for quote in json

请参阅complete code sample here...（与上面相同的plunker链接。）

AngularJS bootstrapUI：Typehead multiple select指令

2 个答案: