Javascript AngularJS bootstrapUI:打印头多选指令
我是AngularJS的新手，在理解select指令如何工作（）时遇到了一些困难 我使用（页面底部）的引导UI示例创建了一个实时搜索 这是我的密码：Javascript AngularJS bootstrapUI:打印头多选指令,javascript,angularjs,angular-ui-bootstrap,Javascript,Angularjs,Angular Ui Bootstrap,我是AngularJS的新手，在理解select指令如何工作（）时遇到了一些困难 我使用（页面底部）的引导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>
<!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>
angular.module（'myApp'，['ui.bootstrap']）；
函数searchCtrl（$scope$http）{
$scope.json=[{“symbol”：“AA”，“name”：“Alcoa Inc.”，{“symbol”：“AAALF”，“name”：“Areal Bank AG”}，{“symbol”：“AAALY”，“name”：“Areal Bank AG非托管美国存托凭证（德国）”}，{“symbol”：“AAARF”，“name”：“Aluar Aluminio Argentino Sa Alua”}，{“symbol”：“AABB”，“name”：“亚洲宽带公司”}，{“symbol”：“AABGF”，“name”：“Agrana Beteiligungs AG”}，{“symbol”：“AABNF”，“名称”：“Altin Ag Baar Namen”}，{“symbol”：“AABVF”，“名称”：“阿伯丁国际公司”}，{“symbol”：“AACAF”，“名称”：“AAC技术控股公司”}，{“symbol”：“AACAY”，“名称”：“AAC技术控股公司无主办ADR（开曼群岛）”，{“symbol”：“AACEY”，“名称”：“亚洲水泥（中国）控股公司无主办ADR（开曼群岛）”}，{“symbol”：“AACMZ”，“名称”：“亚洲水泥公司全球存托凭证144A（台湾）”，{“symbol”：“AACS”，“名称”：“美国商业解决方案公司”}，{“symbol”：“AACTF”，“名称”：“ACT Aurora CTL Technologies Corp”}，{“symbol”：“亚洲龙集团公司”}，{“symbol”：“AADR”，“名称”：“WCM BNY Mellon专注于增长的ADR ETF”}，{“symbol”：“AAEEF”，“名称”：“Altair Gold，Inc.”，{“symbol”：“AAEH”，“名称”：“全美能源控股有限公司”}，{“symbol”：“全美黄金公司”}，{“symbol”：“全美黄金公司”}，{“symbol”：“亚洲全球控股有限公司”}，{“symbol”：“AIA集团有限公司赞助的美国存托凭证（香港）”，{“symbol”：“AAGLF”，“名称”：“Aurora油气有限公司”}，{”符号“：”AAGLY“，”名称“：”Aurora石油天然气有限公司非主办ADR（澳大利亚）”，{”符号“：”AAGRY“，”名称“：”Astra Agro Lestari TBK PT非主办ADR（印度尼西亚）”]
};
太
目前，当我开始键入时，它会搜索公司名称，当我选择一家公司时，它会在字段中写入其符号
我想做的是，它在公司名称和符号名称中搜索。在模板中，它应该显示：symbol-公司名称，并在需要时在符号和公司名称上高亮显示。您只需要将符号字符串添加到模板和字体
下拉列表中的符号：
<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
变成：
{{ match.model.symbol }} - <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
typeahead="quote.symbol + ' - ' + quote.name as quote.name for quote in json | filter:{$: $viewValue} | limitTo:8"
quote.symbol as quote.symbol + ' - ' + quote.name for quote in json
这里您只需执行以下指令：
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">
|_______________________________|
所以，字体的第一部分：
typeahead="quote.symbol as quote.name for quote in json | filter:{$: $viewValue} | limitTo:8"
quote.symbol as quote.name for quote in json
变成：
{{ match.model.symbol }} - <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
typeahead="quote.symbol + ' - ' + quote.name as quote.name for quote in json | filter:{$: $viewValue} | limitTo:8"
quote.symbol as quote.symbol + ' - ' + quote.name for quote in json
请参阅（与上面相同的plunker链接。）@bobbyshark也希望匹配符号。您正确获得了符号-名称部分，但只匹配了名称。另外，您可以编辑您的答案以显示更改吗？指向plunker的链接很好，但网站和页面会消失，当这种情况发生时，只有链接的答案将完全无用。+1干得好。注意：备份@BobbyShark在上面的评论我发布了一个plunk，其中只包含了我的答案中提到的更改：顺便说一句，感谢您的编辑。没有什么比认为您已经在上找到了答案而只链接到404更烦人的了。太好了！非常感谢：）