当前位置: 首页 > 面试题库 >

单元标题中的角度ui-grid事件未触发

东方智敏
2023-03-14
问题内容

我在ui网格的columDefs中使用headerCellTemplate(不是ng-
grid,而是新的重写)。在html中,我有一个复选框。本质上,我试图在作为所有复选框的列的标题中添加一个复选框,以便可以检查所有/无。带有复选框的单元格可以正常显示。问题在于标题中复选框中的ng-
change永远不会触发该事件。另外,ng-
model值永远不会改变。查看代码,有一个名为uiGridHeaderCell的指令,因此我必须假定它正在吞噬我的事件以及它自己的作用域,因此它永远不会在我的作用域中设置变量。

可以解决吗?我遇到的每个示例都从未有人尝试从标头中调用自己的方法(即,调用指令范围之外的内容)。


问题答案:

在ui-grid中,有一个称为的功能externalScopes可能对您有用。教程在这里

这是新的headerCellTemplate

<div ng-class="{ 'sortable': sortable }">
  <div class="ui-grid-vertical-bar">&nbsp;</div>
  <div class="ui-grid-cell-contents" col-index="renderIndex">
    <input type="checkbox" ng-click="$event.stopPropagation();getExternalScopes().showMe()">{{ col.displayName CUSTOM_FILTERS }}
    <span ui-grid-visible="col.sort.direction" ng-class="{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }">
&nbsp;
</span>
  </div>
  <div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false" class="ui-grid-column-menu-button" ng-click="toggleMenu($event)">
    <i class="ui-grid-icon-angle-down">&nbsp;</i>
  </div>
  <div ng-if="filterable" class="ui-grid-filter-container" ng-repeat="colFilter in col.filters">
    <input type="text" class="ui-grid-filter-input" ng-model="colFilter.term" ng-click="$event.stopPropagation()" ng-attr-placeholder="{{colFilter.placeholder || ''}}" />
    <div class="ui-grid-filter-button" ng-click="colFilter.term = null">
      <i class="ui-grid-icon-cancel right" ng-show="!!colFilter.term">&nbsp;</i> 
      <!-- use !! because angular interprets 'f' as false -->
    </div>
  </div>
</div>

(注意第4行的输入类型复选框)

我还添加$event.stopPropagation()了阻止事件到达基础div的功能。

在HTML中,您必须编写:

<div ui-grid="gridOptions" external-scopes="myViewModel" class="grid"></div>

查看此柱塞以了解更多详细信息



 类似资料:
  • 我的组件具有以下功能: 我可以在我的html页面中插入选择菜单,但更改事件不会在我选择项目时触发。有人能让我知道为什么会发生这种情况吗? 谢谢

  • 问题内容: 在下面的cellTemplate中显示数据时如何添加条件: 预期结果应为行状态显示。 这是the 子 提前致谢。 问题答案: 您必须使用。 在您的标记中,定义网格持有人,如下所示。 并在您的控制器中使用以下代码: 或使用角度滤镜。 请注意,这仅 呈现 文本。最好的方法是在ui-grid中使用它之前先转换为具有真实文本状态。以防万一您以后要进行一些基于文本的过滤。 这是一个柱塞

  • 我在角度组件上有一个单击事件: 请参阅在线演示:https://stackblitz.com/edit/angular-ivy-zxmsnc?file=src/app/app.component.ts 为什么是

  • 问题内容: 我正在使用:https : //github.com/angular-ui/ui-grid.info/tree/gh- pages/release/3.0.0-RC.18 当我对值进行硬编码时,如上所示,网格扩展了,一切都按预期工作。 但是,如果我执行以下操作… 高度打印在div中,并且div变宽,但是内容本身仅扩大到340px左右。剩下的空间是空白的,所以我只看到8行,而不是25行。

  • 我尝试了几乎所有的方法,但是鼠标拖动事件没有触发,就像这里解释的那样: https://openjfx.io/javadoc/11/javafx.graphics/javafx/scene/input/MouseDragEvent.html 下面是一个简单的示例,您可以尝试一下(我在JavaFX11.0.2中使用Java11): 我想通过在或中获取的引用。有许多嵌套窗格等,因为我想保持原来的项目布

  • 问题内容: 似乎是一个简单的问题,但解决其他问题的方法似乎对我没有用。 试图通过单击按钮来触发AJAX请求,但似乎并未触发。 HTML示例 javascript 问题答案: 您拥有的代码在拨弄中工作得很好。初始页面加载后,按钮是否通过AJAX动态呈现? 用 代替