web-dev-qa-db-ja.com

どこで入手できますかAngular UI-grid selected items

Angular ui-grid（ng-grid v.3.0）。選択した行を見つけることができません。行または行の行IDを取得するだけです。ここで一番上のコメントを見つけましたが、これは時代遅れだと思います： ng-gridから行を選択しますか？

gridOptions.selectedItems 3.0に保存されていますか？

javascriptangularjsangular-ui-grid
35
Mlalahoi

これはあなたが探しているものですか？ http://ui-grid.info/docs/#/tutorial/210_selection

  1. Ui-grid-selectionタグ（およびアプリのui.grid.selectionモジュール登録）を使用してグリッド選択機能をアクティブにします
  2. gridApiを登録し、gridApi.selectionを使用してgetSelectedRows（）にアクセスします
34
Sycomor

上記の手順 https://stackoverflow.com/a/26188783/2658127 に加えて、ng-clickイベントを介して呼び出して実際の値/オブジェクトを取得する必要がある場合があります。少なくともそれは私がそれを機能させた方法です。

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

そして、テンプレートからselectRow（）を呼び出します。

これは、ui-gridが（特にこの選択された部分に関して）最高のドキュメントを持っていないという事実を考慮して、私と同じように混乱している人向けです。

23
Rajush

最も簡単なアプローチは次のとおりです。

  1. これにコントローラーを追加して、gridApiを登録します。

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

  2. 選択したアイテムの配列にアクセスします。

    $scope.myGridApi.selection.getSelectedRows();

16
Arashsoft

グリッド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);

複数選択が必要な場合は、プレーンオブジェクトの代わりに配列を使用します。

0
Panciz