时间戳

首页 > 解决方案 > 从 UI-Grid onblur 获取文本框值

angularjs - 从 UI-Grid onblur 获取文本框值

问题描述

我想获取在 UI-Grid 中模糊事件的文本框中输入的值。我无法获取触发事件的值，但无法获取如何获取文本框值的逻辑。可以帮助弄清楚。

这是代码：

  $scope.gridOptions = {
        headerTemplate: 'header-template.html',
        showColumnFooter: true,
        columnDefs: [{ name: 'H', width: '15%' }, { name: 'H1', width: '30%' }],
        data: [
            { H: "", H1: "Brand name" },
            { H: " ", H1: "Molecule" },
            { H: "Product Details ", H1: "Therapeutic area" },
            { H: " ", H1: "Targeted indication " },
            { H: " ", H1: "Estimated size of the patient population (in your market) " }
        ],
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
            gridApi.core.on.renderingComplete(gridDrawn());
        },
    };

 $scope.gridOptions.columnDefs.push({
            name: 'H2', enableCellEdit: false,
            field: "colButton", displayName: "Push Me",
            //aggregationType: uiGridConstants.aggregationTypes.sum,
            aggregationHideLabel: true,
            cellTemplate: '<div><input type="Number" placeholder="Enter Number" onblur="calculateTotal()" style="width:90%" /></div>',
            rowTemplate: '<div>Hai</div>',
            width: '10%',
            footerCellTemplate: '<div class="ui-grid-cell-contents" >Total: {{col.getAggregationValue() | number:2 }}</div>'
        });


function calculateTotal() {
    alert("Hello");
 gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
            $scope.msg.lastCellEdited = 'edited row id:' + rowEntity.id + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue;
            $scope.$apply();
        });
}

标签： angularjsangular-ui-gridui-grid

解决方案

在范围上定义一个变量，例如：-

$scope.textboxValue = '';

然后将变量添加到ng-model单元格模板的，如下所示

cellTemplate: '<div><input type="Number" ng-model="textboxValue" placeholder="Enter Number" onblur="calculateTotal()" style="width:90%" /></div>'

您的文本框值将可在函数中访问

$scope.calculateTotal = function () {

    console.log($scope.textboxValue);
    //other code
}

推荐阅读