在Angular JS的ng-grid中實現引導下拉菜單

我想在ng-grid的headerCellTemplate屬性中使用下拉框。該columnDefs看起來像這樣在Angular JS的ng-grid中實現引導下拉菜單

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。我錯過了什麼嗎？

謝謝！

來源

2014-04-29 Incpetor

Bootstrap的下拉菜單依賴於JS。爲了得到這個角度你應該寫指令。這裏有一堆Bootstrap指令http://angular-ui.github.io/bootstrap/ –

你可以檢查 http://stackoverflow.com/questions/18521645/integrate-dropdown-angular-strap-與-NG柵問候，達山JOSHI –

經過一番研究，我發現結果如下。

Angular JS允許您將HTML文件作爲模板添加到表格標題中。

所以，你可以定義自己的模板（這將是簡單的HTML文件中像這樣）

讓我們假設你有一個名爲headerTemplate.html它看起來像這樣

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

和文件現在你可以使用這個下拉菜單，像那樣使用HeaderCellTemplate。

現在簡單覆蓋ng-grid css到visible請參閱下面的評論@Darshan提供的有用鏈接。

來源

2014-05-26 08:35:35 Incpetor

在Angular JS的ng-grid中實現引導下拉菜單

回答

相關問題