我在哪里可以获得Angular ui-grid选定的项目

时间:2014-10-04 00:50:24

标签: javascript angularjs angular-ui-grid

测试Angular ui-grid(ng-grid v.3.0)。不能为我的生活找到选定的行。我只是想在用户点击它时抓住行或行的行ID。在这里找到了最热门的评论,但我认为这已经过时了:Getting select rows from ng-grid?

有谁知道gridOptions.selectedItems在3.0中的存储位置?

4 个答案:

答案 0 :(得分:34)

这是你在找什么? http://ui-grid.info/docs/#/tutorial/210_selection

  1. 使用ui-grid-selection标记激活网格选择功能(并在您的应用中注册ui.grid.selection模块
  2. 注册gridApi并使用gridApi.selection访问getSelectedRows()

答案 1 :(得分:23)

除了上面的https://stackoverflow.com/a/26188783/2658127步骤之外,您可能必须通过ng-click事件调用它来获取实际值/对象。至少我是如何工作的。

Eg:
$scope.selectRow = function(){
    $scope.gridApi.selection.getSelectedRows();
};

从模板中调用selectRow()。

考虑到ui-grid没有最好的文档(特别是这个选择部分),这适用于任何像我一样困惑的人。

答案 2 :(得分:16)

最简单的方法是:

  1. 通过添加控制器来注册gridApi:

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

  2. 访问所选项目数组:

    $scope.myGridApi.selection.getSelectedRows();

答案 3 :(得分:0)

使用grid ui,您必须使用selection.on.rowSelectionChanged来更新存储selectedItem的范围变量。 通过这种方式,您可以使用绑定表达式中的值。

var SelectController = function($scope) {
    ...
    $scope.selectedItem = null;

    $scope.gridOptions = {
            data : 'articles',
            enableRowSelection : true,
            multiSelect : false,
            enableRowHeaderSelection : false,
            ...
        };

        $scope.gridOptions.onRegisterApi = function(gridApi) {
            // set gridApi on scope
            this.$scope.gridApi = gridApi;
        }.bind(this);
        $scope.gridOptions.onRegisterApi = function(gridApi) {
            // set gridApi on scope
            this.$scope.gridApi = gridApi;
            this.$scope.gridApi.selection.on.rowSelectionChanged($scope,
                    function(row) {
                        this.$scope.selectedItem = row.entity;
                    }.bind(this));
        }.bind(this);

如果需要多次选择,请使用数组而不是普通对象。