Question

我在Angular UI Grid中有一个项目列表。当我点击一行时，我想要被带到另一页。（换句话说，网格中的每一行都是一个链接。）

我想这一定是一个非常普遍的愿望，虽然我还没有看到任何关于如何做的文档。什么是实现这个目标的好方法？

Answer 1

我自己想出了答案。这是我的控制器（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;
  }
}

Answer 2

这是我使用的解决方案。 https://stackoverflow.com/a/32815458/2452630

        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");
    }

Answer 3

我理解的问题是：单击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服务导航到通过从contactId属性获取的row.entity的联系人详细信息页面：

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语法，请参阅此article。

有关使用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);
}

Answer 4

  $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

Angular UI Grid单击行

4 个答案: