Angular Пользовательский интерфейс

Ответ 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 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;
  }
}

Ответ 2

Вот решение, которое я использовал. fooobar.com/questions/383729/...

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

Ответ 3

Вопрос, как я понимаю: щелчок строки в Angular сетке пользовательского интерфейса должен привести к навигации по связанной странице (т.е. строка должна вести себя как ссылка). Например, список контактов отображается в сетке, и нажатие на строку выводит вас на страницу контактной информации.

Престижность OP за то, что он ответил на свой вопрос инновационным способом. Тем не менее, я предпочитаю этот ответ, поскольку он не требует создания настраиваемого шаблона строки. Я немного изменил его, поскольку OP не казался удовлетворенным примером Катира.

Во-первых, поймите, что следующий код устанавливает функцию прослушивателя для всякий раз, когда изменяется свойство row.isSelected:

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

т.е. всякий раз, когда нажимается строка, эта функция будет вызываться. Обратите внимание на параметр row, переданный функции, которая может использоваться для доступа к сущности, которую представляет строка. Например, если строка представляет собой контактную сущность, вы можете получить доступ к свойству contactId выбранной строки/объекта. В следующем примере используется служба UI Router $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.

Для полного примера с использованием 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);
}

Ответ 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