如何设置md每日元素的高度,而不使用jquery或javascript
How to set height of md dailog element without using jquery or javascript?
我想在angular中设置一个元素的高度,但我不想在里面使用jquery。我不能使用ng样式,因为它会触发多次。
这是我的HTML
<md-card>
<md-table-container flex>
<md-virtual-repeat-container id="vrContainerProcessFlow" ng-init="$ctrl.getMdTableContainerWidth()">
<table md-table class="md-table-striped" md-row-select="true" multiple="true" ng-model="$ctrl.selected" md-progress="$ctrl.promise">
<thead md-head fix-head md-order="modifyTs">
<tr md-row>
<th md-column md-order-by="processFlowNbr">Number</th>
<th md-column md-order-by="processFlowDesc">Name</th>
<th md-column md-order-by="ownerUserId">Created By</th>
<th md-column md-order-by="modifyUserId">Modified By</th>
<th md-column md-order-by="createTs">Created Date</th>
<th md-column md-order-by="modifyTs">Last Modified Date</th>
</tr>
</thead>
<tbody md-body>
<tr md-row md-select="processFlow" md-on-select="$ctrl.updateSelection" md-on-deselect="$ctrl.updateSelection" md-virtual-repeat="processFlow in $ctrl.processFlows | orderBy: modifyTs">
<td md-cell
ng-click="$ctrl.OnProcessFlowClick($event, processFlow)">
{{processFlow.processFlowNbr}}
<md-tooltip>Click to modify</md-tooltip>
</td>
<td md-cell>{{processFlow.processFlowNbr}}</td>
<td md-cell>{{processFlow.processFlowDesc}}</td>
<td md-cell>{{processFlow.ownerUserId}}</td>
<td md-cell>{{processFlow.modifyUserId}}</td>
<td md-cell>{{processFlow.createTs | date:'MM/dd/yyyy'}}</td>
<td md-cell>{{processFlow.modifyTs | date:'MM/dd/yyyy'}}</td>
</tr>
<tr md-row ng-if="$ctrl.processFlows.length === 0">
<td md-cell>No Records Found !</td>
</tr>
</tbody>
</table>
</md-virtual-repeat-container>
</md-table-container>
<process-flows-confirm-delete></process-flows-confirm-delete>
</md-card>
在这里设置了虚拟重复容器的高度,这个标记被包装在一个id为"mdDialogProcessFlows"的div中。
这是计算typescript
中的高度的函数 getMdTableContainerWidth(): void {
let style = "height: ";
let mdDialog = document.getElementById("mdDialogProcessFlows").scrollHeight;
style += mdDialog - 80 + 'px';
let mdVRContainer = angular.element(document.getElementById("vrContainerProcessFlow"));
mdVRContainer.attr("style", style);
}
有没有人有任何解决方案不使用ng风格,指令,当然没有javascript或jquery?
您仍然可以使用一次性绑定的ng-style
。这将只设置一次值,而不会第二次调用该函数。使用以下语法:
ng-style="::{width: getMdTableContainerWidth()}"
::
将使表达式成为一次性绑定
相关文章:
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- Javascript(jQuery)给了我奇怪的结果
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- Javascript/jQuery中的并行Ajax调用
- 我可以在Javascript/jQuery中使用一个变量作为键吗
- Javascript/Jquery/PHP加载页面-如何
- Javascript/Jquery Blob not showing Chrome PDF
- 如何使用javascript/jquery获取iframe的URL的锚点属性
- OnClick/Onhover Javascript/jquery
- 如何从javascript/jquery中的复选框中获取布尔值
- javascript/jquery将utc转换为短格式的本地时间
- 在不设置协议的情况下,使用javascript/jquery更改iframe-src
- 如何向这个javascript/jquery函数添加参数
- 用JavaScript/jQuery点击图片,选中多个方框
- 使用Javascript/JQuery获取JSON GET数据
- 从数组中删除元素的最佳方法是:javascript/jquery
- Javascript/jQuery压缩一个图像正确的评论帖子,并使用Ajax Laravel 5.2保存到控制器中
- 用DRY方式Javascript/JQuery动态替换HTML
- 类似Javascript JQuery的库
- 如何在 Javascript/jQuery 中获取一些随机下拉列表的选定值