如何將uib-dropdown菜單附加到表格行中？

我有一個uib下拉菜單。當用戶點擊一行時，它應該出現在這一行的下面。如何將uib-dropdown菜單附加到表格行中？

我的當前解決方案（http://plnkr.co/edit/sVdR3CLgi5BFuWl5jxWM）顯示在該表下方。

我該如何改變這種情況？

<div ng-controller="DropdownCtrl"> 
    <!-- Simple dropdown --> 
    <table class=".table"> 
     <tr ng-repeat="it in items" ng-click="toggleDropdown($event)"> 
     <td> 
      {{it}} 
     </td> 
     </tr> 
    </table> 

    <div class="btn-group" uib-dropdown is-open="status.isopen"> 
     <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button"> 
     <li role="menuitem"><a href="#">Action</a></li> 
     <li role="menuitem"><a href="#">Another action</a></li> 
     <li role="menuitem"><a href="#">Something else here</a></li> 
     <li class="divider"></li> 
     <li role="menuitem"><a href="#">Separated link</a></li> 
     </ul> 
    </div>

來源

2016-08-17 BetaRide

好，把下拉在表格單元格內部，而不是在表格之後：http://plnkr.co/edit/sUKkYSgsrTmcfPur6Y7C?p=preview –

這不會發生在這裏，無論是在Firefox中還是在Chrome中。你使用的是什麼瀏覽器？ –

它確實有效。沒有看到你的plnkr，並在我的嘗試中有一個錯誤。 Feal可以自由添加您的評論作爲完整的答案，以便我可以接受它。 – BetaRide

您可以簡單地向每個單元格添加下拉菜單，而不是在表格後面使用單個下拉菜單。

這裏的a plunkr向您展示了一個示例。主要的變化是移動<td>內部下拉的HTML代碼，並給open國旗在列表中添加到每個項目，而不必在範圍是全球性的：

$scope.items = [ 
    { 
     label: 'The first choice!' 
    }, 
    { 
     label: 'And another choice for you.' 
    }, 
    { 
     label: 'but wait! A third!' 
    } 
    ]; 

    $scope.toggled = function(open) { 
    $log.log('Dropdown is now: ', open); 
    }; 

    $scope.toggleDropdown = function(it, $event) { 
    $event.preventDefault(); 
    $event.stopPropagation(); 
    it.isopen = !it.isopen; 
    };

來源

2016-08-17 07:54:53

如何將uib-dropdown菜單附加到表格行中？

回答

相關問題