ng2-bootstrap中的Typehead无法自定义显示不同属性的选项

时间:2017-03-06 22:38:21

标签: twitter-bootstrap angular ng2-bootstrap

配置ng2-bootstrap的Typeahead-Grouping results时,如何自定义选项列表以显示不同的属性?

在文档示例中:

<pre class="card card-block card-header">Model: {{groupSelected | json}}</pre>
<input [(ngModel)]="groupSelected"
       [typeahead]="statesComplex"
       typeaheadOptionField="name"
       typeaheadGroupField="region"
       class="form-control">

键入lan会产生“Mayland”/ South和“Rhode Island”/ NorthEast。

如果我有其他属性title,请执行以下操作:

{id: 21, name: 'Maryland', region: 'South', title: 'The Beautiful'},
{id: 40, name: 'Rhode Island', region: 'Northeast', title: 'The Amazing'},

如何自定义模板以列出The BeautifulThe Amazing?我已使用optionsListTemplate以各种排列方式尝试typeaheadItemTemplate{{groupSelected | json}},但无济于事。

1 个答案:

答案 0 :(得分:0)

使用$domain_arg = escapeshellarg( $_POST['domain'] ); $today = date("Y-m-d-H:i:s"); $cmd = "/home/ubuntu/dtest/dtest.sh $domain_arg | aha -b -t 'Domain test of $domain_arg' > /var/www/website/results/$domain_arg.$today.html"; $output = shell_exec($cmd); header("Location: http://the.web.com/results/$result.$today.html");

typeaheadItemTemplate标记处添加input,如下所示:

typeaheadItemTemplate

然后添加一个附带的<input [(ngModel)]="groupSelected" ... [typeaheadItemTemplate]="myItemTemplate" > 标记,如下所示:

template

额外说明:

  • <template #myItemTemplate let-model="item"> {{model.title | json}} </template> 是将输入元素与自定义模板标记绑定的任意值。
  • myItemTemplate是您的集合(对象数组)
  • item遍历您的收藏。
  • let-model显示所需的属性(以model.title为例)。