如何在两个不同的 onclick 事件中使用同一模型中的 ag-grid 动态更改模态数据

Question

我试图在两次不同的图标点击时调用同一个模式。我只需要切换单个 columnDef 即可在两个不同的函数调用中切换网格。
图标作为按钮 fade-in 模式。
此外，我需要将模式标题切换为“Process”（保持不变）到“Process A”和“进程 B”

我的样例HTML如下

<!-- first icon with myFuncA() -->
<label data-toggle="modal" data-target="#demo" data-ng-click="myFuncA()" title="Modal {{X}}">
                <span class="fa fa-dollar iconColor fa-custom-size"></span>
            </label>

<!-- first icon with myFuncB() -->
<label data-toggle="modal" data-target="#demo" data-ng-click="myFuncB()" title="Modal {{Y}}">
                <span class="fa fa-credit-card iconColor fa-custom-size"></span>
            </label>     

<!-- my modal -->
<div class="modal fade" id="demo" role="dialog" data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header customPopup">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <!-- title i need to toggel as per discription in question -->
                <h4 class="modal-title">Modal {{ }} </h4> 
            </div>
            <!-- grid I wish to keep same on both function calls -->
            <div class="col-sm-12 col-md-12 col-lg-12" style="padding:10px;">
                <div id="agGrid" ng-style="{'width' : '100%', 'height' : '350px'}" ag-grid="agGridOptions" class="ag-blue ag-fresh ag-basic"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btnBackground customBtn-75" data-dismiss="modal">Cancel</button>
                <button type="button" data-ng-disabled="saveButtonDisable" class="btn btnColor customBtn-75" data-dismiss="modal" data-ng-click="update('true')">Proceed</button>
            </div>
        </div>
    </div>
</div>

我的 gridOptions 和 ColDefs

脚本

$scope.agListGridOptions = {
            columnDefs: $scope.agColumnDefs,
            enableFilter: true,
            rowDeselection: true,
            enableColResize: true,
            rowHeight: 30,
            headerHeight: 35,
            suppressRowClickSelection: true,
            suppressScrollLag: true,
            angularCompileRows: true,
            icons: {
                groupExpanded: '<i class="fa fa-minus-square-o fa-lg customPointer iconColor"/>',
                groupContracted: '<i class="fa fa-plus-square-o fa-lg customPointer iconColor"/>',
                menu: '<i class="fa fa-bars fa-lg customPointer iconColor"/>',
                columnGroupOpened: '<i class="fa fa-minus-square-o fa-lg customPointer iconColor"/>',
                columnGroupClosed: '<i class="fa fa-plus-square-o fa-lg customPointer iconColor"/>',
                filter: '<i class="fa fa-filter fa-lg customPointer iconColor"/>',
                sortAscending: '<i class="fa fa-caret-down fa-lg customPointer iconColor"/>',
                sortDescending: '<i class="fa fa-caret-up fa-lg customPointer iconColor"/>',

            },
            overlayNoRowsTemplate: '<span class="ag-overlay-no-rows-center">No Records to show</span>',
        };

       $scope.agColumnDefs = [{
            headerName: "SR",
            field: "UserID",
            width: 85,
            hide: true
        }, {
            headerName: "Column A",
            field: "EmpName",
            width: 170,
            cellClass: "text-align-left"
        }, {
            headerName: "Column B",
            field: "CurrentLWP",
            width: 120,

        }, {
            headerName: "Deduct A",
            field: "deductA",
            width: 85,
            editable: false,
            cellRenderer: cellRendererForDeductA,
            cellClass: "text-align-right"
        }, {
            headerName: "Deduct B",
            field: "deductB",
            width: 85,
            editable: false,
            cellRenderer: cellRendererForDeductB,
            cellClass: "text-align-right"
        }];

大家好，

我需要使用 headName 切换列："Deduct A" 和 "Deduct B" 在同一个网格中

使用 cellRendererForDeductA 和 cellRendererForDeductB 对特定列单元格进行一些验证。

Answer 1

通过在单击按钮或单击图标时传递 true 或 false 来调用这些函数？尚未测试此代码，但应该可以。

<button (click)="showDeductA(true)">Show DeductA</button>

showDeductA(show) {
    this.gridColumnApi.setColumnVisible("deductA", show);
    this.gridColumnApi.setColumnVisible("deductB", !show);
  }

showDeductB(show) {
    this.gridColumnApi.setColumnVisible("deductB", show);
    this.gridColumnApi.setColumnVisible("deductA", !show);
  }

如何在两个不同的 onclick 事件中使用同一模型中的 ag-grid 动态更改模态数据

How to change modal data dynamically using ag-grid in same model on two different onclick events

javascript

angularjs

ag-grid