web-dev-qa-db-ja.com

Angular UI Gridクリック行

Angular UI Grid にアイテムのリストがあります。行をクリックすると、別のページに移動したいです。 （つまり、グリッドの各行はリンクになります。）

私はこれを行う方法についてのドキュメントを見たことがありませんが、これは非常に一般的な欲求であるに違いないと思います。これを達成する良い方法は何ですか？

angularjsangular-ui-grid
15
Jason Swett

自分で答えを見つけました。これが私のコントローラー（ES6）です。

'use strict';

class TrackingRecordsCtrl {
  constructor($scope) {
    // The content of this template is included
    // separately 
    $scope.gridOptions = {
      rowTemplate: 'app/components/tracking-record/grid-row.html',
    };

    // This function is referenced from the row's template.
    // I'm just console.logging the row but you can of
    // course do anything you want with it.
    $scope.gridRowClick = row => {
      console.log(row);
      // or maybe $location.path(row.url)?
    };

    $scope.gridOptions.data = {
      // This of course can't just be an empty object.
      // Chances are you already have something defined
      // for gridOptions.data.
    };
  }
}

TrackingRecordsCtrl.$inject = ['$scope'];

export default TrackingRecordsCtrl;

そして、これが私の行テンプレート（Jade）です。

.ui-grid-cell(
  ng-repeat='(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name'
  ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader  }"
  ui-grid-cell=''
  ng-click='grid.appScope.gridRowClick(row)'
)

ボーナスとして、ここに私のスタイルシート（SCSS）があります。カーソルの下の行を強調表示し、pointerカーソルを使用して行がクリック可能であることを明確にすることが理にかなっていると思いました。

.ui-grid-row {
  cursor: pointer;

  &:hover .ui-grid-cell {
    background-color: #CCC;
  }
}
20
Jason Swett

ここに私が使用した解決策があります。 https://stackoverflow.com/a/32815458/24526

        yourCtrl.gridOptions = {
        enableFiltering: true,
        enableHiding : false,
        enableSorting: true,
        appScopeProvider : yourCtrl,
        rowTemplate: '<div ng-click="grid.appScope.doSomething(row)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" class="ui-grid-cell" ng-class="col.colIndex()" ui-grid-cell></div>',
    };

    yourCtrl.doSomething = function(row) {
        alert("lala");
    }
15
KuN

私が理解している質問：Angular UI Gridの行をクリックすると、関連ページに移動するはずです（つまり、行はリンクのように動作するはずです）。たとえば、連絡先のリストグリッドに表示され、行をクリックすると、連絡先の詳細ページが表示されます。

革新的な方法で彼自身の質問に答えたOPに称賛を送ります。ただし、カスタム行テンプレートを作成する必要がないため、これは answer の方が好ましいです。 OPはKathirの例に満足していないようでしたので、もう少し具体化しました。

まず、次のコードがrow.isSelectedプロパティが変更されるたびにリスナー関数を設定することを理解してください。

gridApi.selection.on.rowSelectionChanged($scope,function(row){
        //Do something when a row is selected
      });

つまり行がクリックされるたびに、この関数が呼び出されます。行が表すエンティティにアクセスするために使用できる関数に渡されるrowパラメーターに注意してください。たとえば、行が連絡先エンティティを表す場合、選択された行/エンティティのcontactIdプロパティにアクセスできます。次の例では、UIルーターの$stateサービスを使用して、row.entityプロパティから取得したcontactIdを渡す連絡先詳細ページに移動します。

this.gridOptions.onRegisterApi = function (gridApi) {
                //set gridApi to controller property
                this.gridApi = gridApi;
                gridApi.selection.on.rowSelectionChanged($scope, function (row) {
                    $state.go("contact.details.view", {contactId: row.entity.contactId});
                });
            }

$scope構文を使用している場合でも、Controller asオブジェクトを渡す必要があることに注意してください。これを参照してください 記事Controller as構文について。

TypeScriptを使用した完全な例（簡潔にするためにファイル参照は省略されています）：

"use strict"
export class ContactsCtrl {

    title: string;
    contacts: interfaces.IContact[] = [];
    gridAPI: any;
    gridOptions: any = {
        enableFullRowSelection: true,
        enableRowSelection: true,
        multiSelect: false,
        enableRowHeaderSelection: false,
        data: "vm.contacts",
        columnDefs: [
            { field: "contactId", displayName: "Contact ID", width: 100 },
            { field: "name", displayName: "Contact Name" }            ]
    }

    static $inject = ["$scope", "$state"];
    constructor(private $scope : ng.IScope, private $state : ng.ui.IStateService) {
        this.gridOptions.onRegisterApi = function (gridApi) {
            //set gridApi on scope
            this.gridApi = gridApi;
            gridApi.selection.on.rowSelectionChanged($scope, function (row) {
                $state.go("contact.details.view", {contactId: row.entity.contactId});
            });
        }
    }
}
angular.module("app.contacts").controller("ContactsCtrl", contacts.controllers.ContactsCtrl);
}
12
Blake Mumford
  $scope.gridOptions.onRegisterApi = function( gridApi ) {
    $scope.gridApi = gridApi;
       gridApi.selection.on.rowSelectionChanged($scope,function(row){
        var msg = 'row selected ' + row.isSelected;
        //Open your link here.
      });
  };

http://plnkr.co/edit/EO920wsxuqr3YU8931GF?p=preview

4
Kathir