Question

我正在尝试在ng-grid的headerCellTemplate属性中使用下拉框。 columnDefs看起来像这样

   columnDefs: [{field:'dt', displayName:'Time', width:'**', cellFilter:'date:\"HH:mm:ss\"',headerClass:'grad1',cellTemplate:'<div><center>{{row.getProperty(\'dt\')|timefilter}}</center></div>'},
 {field:'rl', displayName:'Impact',cellTemplate:'<div class="ngCellText" ng-class="col.colIndex()"><center><img  ng-src="{{row.getProperty(\'rl\') | dateformat1}}"</img></center></div>',width:'80px',sortFn:impSortFn,headerClass:'grad1',headerCellTemplate:"impactHeader.html"}, ]

headerCell模板使用看起来像这个

的impactHeader.html文件

    <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Impact<span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu">
  <li><a href="#">OptA</a></li>
  <li><a href="#">OptB</a></li>
  <li><a href="#">OptC</a></li>
</ul>
</div>

我可以看到下拉列表插入到表格的标题中，但是下拉列表不可见。即我看不到OptA，OptB和OptC。我错过了什么吗？

谢谢！

Answer 1

经过一番研究后，我发现结果如下。

Angular JS允许您将HTML文件作为模板添加到表头。

因此，您可以定义自己的模板（这将是简单的HTML文件）

我们假设您有一个名为 headerTemplate.html 的文件，看起来像这样

 <div class="btn btn-default dropdown-toggle">DropDown</div>

现在您可以使用此下拉列表HeaderCellTemplate columnDefs中的ng-grid，就像有问题的那样。

现在只需将visible css覆盖为{{1}}，请参阅下面评论中@Darshan提供的有用链接。

在Angular JS的ng-grid中实现Bootstrap Dropdown

1 个答案: