Angularjs 角度UI网格单击行

我有一个列表中的项目。当我单击一行时，我希望被带到另一个页面。（换句话说，网格中的每一行都是链接。）

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

  $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.
      });
  };

---

我自己找到了答案。这是我的控制器（ES6）：

这是我的行模板（Jade）：

作为奖励，这是我的样式表（SCSS）。我认为突出显示光标下的行并使用

指针

光标可以更清楚地显示这些行是可单击的，这是有意义的

.ui-grid-row {
  cursor: pointer;

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

---

我理解的问题是：单击角度UI网格中的一行应该会导航到相关页面（即该行的行为应该类似于链接）。例如，一个联系人列表显示在网格中，单击一行可进入联系人详细信息页面

感谢OP以创新的方式回答了自己的问题。但是，我更喜欢这样，因为它不需要创建自定义行模板。我把它充实了一点，因为OP似乎对凯瑟的例子并不满意

首先，了解以下代码为row.isSelected属性更改时设置侦听器函数：

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

即，无论何时单击一行，都将调用此函数。请注意传递给函数的

行

参数，该参数可用于访问该行表示的实体。例如，如果一行表示联系人实体，则可以访问所选行/实体的

contactId

属性。下面的示例使用UI路由器的

$state

服务导航到联系人详细信息页面，并传递从

行获取的
联系人ID
。实体

属性：

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

对象需要传入，即使您正在使用

控制器作为

语法。将此关于

控制器的信息称为
语法

有关使用Typescript的完整示例（为简洁起见，省略了文件引用）：

这是我使用的解决方案。

yourCtrl.gridOptions={
启用筛选：正确，
启用隐藏：false，
enableSorting:true，
appScopeProvider:yourCtrl，
行模板：“”，
};
yourCtrl.doSomething=函数（行）{
警报（“拉拉”）；
}
Hmm，我看不出这是如何回答这个问题的。我不能点击你的Plunker中的任何一行，如果有一种方法可以调整你的自定义模板以产生一个可点击的行，这对我来说并不明显。我误解了什么吗？对不起，我重新阅读了我的问题，意识到它可能不清楚。我想要的是，我的网格的每一行都是一个链接，将我带到不同的页面。（我还更新了我的问题，使之更清晰。）检查新的plnkr，看它是否更接近，但我不确定它是否是我可以接受的解决方案。行选择似乎与单击的行无关。可能所选行包含有关您希望发生什么的信息。api.selection.on.rowSelectionChanged事件只是在其中执行您希望执行的任何操作（在提问者的情况下是视图更改），并获取行数据以完成该操作。这是onClick的UI网格等价物。您好，我刚刚看到了您的答案，我认为您不能以这种方式调用
$state
，首先变量是私有的，因此您需要使用
this.$scope
，然后因为
this
绑定到
gridApi
，不是吗？
gridApi.selection.on.rowSelectionChanged($scope,function(row){
        //Do something when a row is selected
      });

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

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

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