如何根据输入隐藏和显示带列的 UI 网格

Question

我正在使用 Angular UI 网格。我想根据复选框输入显示 UI 网格。我可以根据复选框隐藏和显示网格，但无法在 UI 网格中显示列。

HTML代码

<table>
   <tr>
    <td valign="top">
         <label>Recursive</label>
    </td>
   </tr>
   <tr>
    <td valign="top">
          <input type="checkbox" ng-model="eventadd.md_eventrecursive"
                 ng-true-value="true" ng-false-value="false">
    </td>
   </tr>
</table>
<br/>
<div ng-show="eventadd.md_eventrecursive">
   <div ui-grid="gridRecursiveEvent" class="gridSmallStyle"></div>
</div>

JS代码

$scope.gridRecursiveEvent = {
    columnDefs: [
        {
            field: 'Name', displayName: 'Name'
        },
        {
            field: 'Id', displayName: 'Id',
        },
    ],
}

选中递归事件后，它显示网格但没有列

需要你的帮助。

Answer 1

请参考this page。

问题是网格一开始没有渲染（因为它是隐藏的）。选中该复选框不会呈现 ui-grid。

请参阅文档以了解满足ui您希望的可能解决方法。

如何根据输入隐藏和显示带列的 UI 网格

How to Hide and Show UI Grid with Columns based on input

angularjs

angular-ui-grid