CODEWITHSUNDEEP
dynamicdrop-down-menudatatablesangular-uiangular-ui-bootstrap
Abbas Moazzami
Abbas Moazzami

Reputation: 439

Angular UI (Bootstrap) - dynamic Dropdown not working in DataTables

I would like to use Angular-UI (bootstrap) drop down button in a cell of my DataTables. There's no problem when using the drop down button on the page but for DataTables it should be passed through Javascript.

Plunker link

thanks for your advice

Upvotes: 2

Views: 570

Answers (1)

Thomas
Thomas

Reputation: 2137

Someone opened an issue in Github for this "issue". Probably was the author himself:

https://github.com/angular-ui/bootstrap/issues/4111

Wesley Cho answered with a working plunkr:

http://plnkr.co/edit/dAPQKNSdgWQDv5PnEQYa?p=preview

The key point is that the HTML in DataTables is not compiled. So you have to use $compile in a $rowCallback:

rowCallback: function(row, data) {
    $(row).find('.button-wrapper').append(
      $compile('<div class="btn-group" dropdown><button id="split-button" type="button" class="btn btn-danger">Action</button><button type="button" class="btn btn-danger" dropdown-toggle><span class="caret"></span></button><ul class="dropdown-menu" role="menu" aria-labelledby="split-button"><li role="menuitem"><a href="#">Action</a></li></ul></div>')($scope)
    );
  }

Upvotes: 1

Related Questions