angularjs - ng-grid 隐藏 bootstrap 样式的下拉菜单

Question

我正在升级表格。表格中的每一行都有几个元素，包括每一行特定列中的两个下拉列表。我已将表格升级为 ng-grid，并将下拉菜单从普通选择小部件升级为样式化 Bootstrap drop-down elements以匹配网站上的其他人。我遇到的根本问题是 ng-grid 的 CSS 布局导致实际的下拉菜单被放在下面的单元格后面，因此不可见。检查元素表明它们实际上正在呈现，具有适当的高度、宽度和内容，但仅显示在另一个单元格中的内容后面。我试过禁用 CSS overflow: hidden on the desired cells，但似乎这个属性也被设置为整个网格并在那个级别关闭它完全破坏了网格布局。我有一个可行的解决方法，但它让我想洗个澡，我相信有更优雅的方法可以做到这一点:

1) 为可见部分放入一个单元格模板，包括传递列的 ng-click 调用 (Coffeescript):

    {field: "type", 
    displayName: "Type",  
    width: 155, 
    original_width: 155, 
    pinned: false, 
    cellClass: "type_col", 
    headerClass: "type_col", 
    cellTemplate: """<div ng-click="editor.activeCol(col)" class="btn-group">
    <button ng-show="row.entity[col.field]" style="width: 125px" 
    class="btn dropdown-toggle blk-txt" href="#">
    {{row.entity[col.field]}}</button><button class="btn">
    <span class="caret"></span></button></div>"""
    },

2) 将选择行回调放到不同的方法中:

    multiSelect: false,
    enableRowSelection: true,
    afterSelectionChange: angular.bind(@, selectFunc),

3) 有一个完全独立的下拉选项的 Angular 模板，该模板被归类为始终显示为 Bootstrap 打开，但同时具有 ng-show 和 ng-style 元素以允许我的代码更改其可见性和精确度地点:

<div ng-show="editor.utilization" ng-style="editor.dropdown_style">
<div class="btn-group editor-widget open">
<ul class="dropdown-menu">
<li ng-click="editor.selectUtil('heavy')"><a href="#">Heavy</a></li>
<li ng-click="editor.selectUtil('medium')"><a href="#">Medium</a></li>
<li ng-click="editor.selectUtil('light')"><a href="#">Light</a></li>
</ul>
</div>
</div>

当用户点击(明显的)下拉菜单时，会发生以下情况:

1) ng-click 事件将列传递给类，这是存储的

2) row select (afterSelectionChange) 回调触发行，并且能够从上一次调用中获取列，我们现在知道实际单元格的行和列

3) 抓取了相关单元格的确切屏幕位置，并且下拉选择模板在被单击的单元格正下方可见，从而产生正常下拉操作的错觉。

这是一个很长的解释，但想给出我所尝试的背景，以表明我正在寻找一种更简单(希望更简单)的方法来在 ng-grid 单元格中包含样式化的 Bootstrap 下拉小部件.这个项目的全部目标是设计和美化已经工作的表单，因此仅通过削减样式来实现纯功能的解决方案并不能真正达到目的。

Answer 1

我就是这样解决的。我在 ng-grid 中有一个单元格，在单元格中我有一个向下的字形箭头。当我单击它时，我希望显示下拉切换。有了 CSS，我得到了我想要的。但是，我有很多带箭头的单元格，因此我不得不动态地更改 css 样式“左”。我使用我的 javascript 执行此操作。

希望对您有所帮助!

单元格模板:

<div class="ngCellText" ng-class="col.colIndex()" class="dropdown">
  <span ng-cell-text>{{row.getProperty(col.field)}}</span>
  <a class="dropdown-toggle" ng-click="setXchords($event)">
    <i class="glyphicon glyphicon-chevron-down"></i>
  </a>
  <ul class="dropdown-menu">
    <li ng-repeat="choice in editableItems">
      <a>{{choice}}</a>
    </li>
  </ul>
</div>

CSS:

.dropdown-menu {
    position: fixed;
    top: inherit;
    left: 85px;
}

JavaScript:

$scope.setXchords = function(e) {
    var elem = angular.element(e.currentTarget);
    $(elem).next().css('left', e.clientX).css('top', e.clientY);
};