从ng-grid获取选择的行?

时间:2013-06-01 17:27:32

标签: angularjs data-binding angularjs-directive angularjs-scope ng-grid

如何在ng-grid中创建(或访问)所选行数组?


Documentation(滚动到“网格选项”)

id                 | default value | definition
-----------------------------------------------
selectedItems      |       []      | all of the items selected in the grid.
                                     In single select mode there will only
                                     be one item in the array.

的index.html

<body ng-controller="MyCtrl">
    <div class="gridStyle" ng-grid="gridOptions"></div>

    <h3>Rows selected</h3>
    <pre>{{selectedItems}}</pre>
</body>

main.js

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];
    $scope.gridOptions = { data: 'myData' };
});

Plnkr for the code(并运行它)

5 个答案:

答案 0 :(得分:23)

根据文档,selectedItems应该是$scope.gridOptions的属性,请尝试以下操作:

控制器

$scope.gridOptions = { data: 'myData', selectedItems: [] };

HTML

<pre>{{gridOptions.selectedItems}}</pre>

答案 1 :(得分:7)

您可以从以下网址获取ng-grid 2.x的选定项目:

$scope.gridOptions.$gridScope.selectedItems

答案 2 :(得分:4)

在版本3中,你可以这样做:

$scope.gridOptions.onRegisterApi = function(gridApi){

  $scope.gridApi = gridApi;
  $scope.mySelectedRows=$scope.gridApi.selection.getSelectedRows();
}

有关详细信息,请参阅http://ui-grid.info/docs/#/api/ui.grid.selection.api:PublicApi

答案 3 :(得分:3)

对于3.0,您可以按照以下方式捕获行:

$scope.gridOptions.onRegisterApi = function(gridApi){
  //set gridApi on scope
  $scope.gridApi = gridApi;
  gridApi.selection.on.rowSelectionChanged($scope,function(row){
    var msg = 'row selected ' + row.isSelected;
    $log.log(msg);
  });
};

此处有更多信息:http://ui-grid.info/docs/#/tutorial/210_selection

答案 4 :(得分:1)

我现在正试图读取所选行的列表。该选项似乎已经移动,我现在可以在:

中找到它
$scope.gridOptions.ngGrid.config.selectedItems

它似乎是只读的