以uiGrid角度获取所选行的值

时间:2016-12-13 14:36:29

标签: angularjs ui-grid

我有一个ui-grid,允许用户选择一行。如果选择了一行,我想将所选行的某些字段绑定到输入字段。这怎么可能?

$scope.gridOptions = {
data : items,
columnDefs: [
  { name: 'ITEMNO', field: 'ITEMNO', displayName: 'Pos.', enableHiding : false, width: 75 },
  { name: 'SERIALN_REQ', field: 'SERIALN_REQ', displayName: 'Serialpflichtig', enableHiding : false, width: 175  }
],
enableScrollbars : false,
enableHorizontalScrollbar : 0,
enableVerticalScrollbar : 0,
enableFullRowSelection : true,
enableRowSelection: true,
enableSelectAll: false,
multiSelect : false,
selectionRowHeaderWidth: 0,
rowHeight: 55,
enablePaginationControls: false,
paginationPageSize: 5

};

  $scope.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;
    $scope.gridApi.grid.modifyRows($scope.gridOptions.data);
    $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
    var rows = $scope.gridApi.selection.getSelectedRows();
  }

在我的HTML中,我有以下内容:

<div class="large-2 columns">
    <input type="text" disabled ng-model={{}}> <!-- here i want to bind a cell of the selected grid row -->
  </div><div ui-grid="gridOptions" ui-grid-selection ui-grid-pagination class="myGrid"></div>

1 个答案:

答案 0 :(得分:1)

这是您期望的一个(获取选定的行值并将它们绑定到输入元素)。

使用以下代码

$scope.rowtobebinded=undefined;
$scope.gridOptions.onRegisterApi = function(gridApi) {
        $scope.gridApi = gridApi;
        $scope.gridApi.grid.modifyRows($scope.gridOptions.data);
        $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
        var rows = $scope.gridApi.selection.getSelectedRows();

        //aravind's code to get the selected row elements is as below
        gridApi.selection.on.rowSelectionChanged($scope,function(row){
                console.log("selected row is ",row);

               //binding the row's no to the textbox

                $scope.rowtobebinded=row.entity.ITEMNO; 

        });
});

<强> LIVE DEMO