以角度ui网格获取单元格值

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实体。

下面是将鼠标绑定到网格，并循环遍历$ 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;
  }

来自Plunker的例子

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

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

Answer 3

首先，您可以在gridOptions.onRegisterApi中注册Event

gridBodyElem.addEventListener('mouseup', handleGridClick);

然后只需添加这样的功能

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