Question

我目前正在使用角度ui-grid为我的项目显示3列数据，这些数据将通过API调用作为JSON对象检索。

我目前能够在网格中显示数据。现在，每当用户点击特定行时，进行另一个API调用，将第一列的相应单元值作为查询数据发送。收到的响应显示在模态窗口中。

但是，我无法在网格上放置click事件并在单击特定行时检索单元格值，因此无法正确进行第二次API调用。

我想在div上进行典型的ng-click无法实现我的目的，因为它没有捕获单元格值。

有人可以建议如何实现此功能吗？

注意：单元格不可编辑。它们只是只读的。

HTML

<div ui-grid="gridOptions" ui-grid-resize-columns ui-grid-exporter class="grid"></div>

JS

testFactory.getAPIData()
            .then(function(response){
                $scope.gridOptions.data = response.data;
            }), function(error){
                console.log("Factory error");
            }

        $scope.gridOptions = { 
            enableRowSelection: true, 
            enableRowHeaderSelection: false   
        };
        $scope.gridOptions.enableHorizontalScrollbar = 0;            

        $scope.gridOptions.columnDefs = [
                { field: 'id', name: 'ID', enableHiding: false },
                { field: 'name', name: 'NAME', enableHiding: false },
                { field: 'age', name: 'AGE', enableHiding: false }
        ];

        $scope.gridOptions.onRegisterApi = function (gridApi) {
            $scope.myGridApi = gridApi;
        };

Answer 1

您可以使用angular.element().data()获取$ scope范围的网格元素。行容器的$ scope包含row属性，其中包含rows实体。

以下是将mouseup绑定到网格，并循环遍历$ scope。$ parent直到找到row属性的示例。然后，该行属性可用于进行API调用，并执行您对响应所需的任何操作。

http://plnkr.co/edit/P52jJkPRuzmFUWq3Fheb?p=preview

Answer 2

这是你想要的吗？

var rowCol = $scope.gridApi.cellNav.getFocusedCell();
  if(rowCol !== null) {
      $scope.currentFocused = 'Row Id:' + rowCol.row.entity.id + ' col:' + rowCol.col.colDef.name;
  }

Example from Plunker

如果是，那么您可以访问以下网站了解更多详情： Details

希望这会对你有所帮助。祝好运！！！

Answer 3

首先，您可以在gridOptions.onRegisterApi

中注册事件

gridBodyElem.addEventListener('mouseup', handleGridClick);

然后只需添加一个像这样的函数

function handleGridClick(evt) {
            var targetElem = angular.element(evt.target);
            var elemData = targetElem.data().$scope;
}

以角度ui-grid

3 个答案: