当点击行时，Angular UI Grid显示另一个视图

此主题与this one非常相关。简单地说，有一个UI格（表），当你点击（触摸）上表中的行项目，它显示了另一种观点，但我坚持（ES5）：当点击行时，Angular UI Grid显示另一个视图

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.router']); 

app.controller('MainCtrl', ['$scope', 'uiGridConstants', function ($scope, uiGridConstants) { 
    $scope.gridOptions = { enableRowSelection: true, enableRowHeaderSelection: false }; 

    $scope.gridOptions.columnDefs = [ 
    { field: "contactId", displayName: "CID", width: 60 }, 
    { field: "name", displayName: "Contact Name" } 
    ]; 

    $scope.myData = [{contactId: 1, name: "Contact 1"}, 
        {contactId: 2, name: "Contact 2"}, 
        {contactId: 3, name: "Contact 3"}, 
        {contactId: 4, name: "Contact 4"}]; 

    $scope.gridOptions.data = []; 

    $scope.gridOptions.data = $scope.myData; 

    $scope.gridOptions.multiSelect = false; 
    $scope.gridOptions.modifierKeysToMultiSelect = false; 
    $scope.gridOptions.noUnselect = true; 

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

这里是plunker http://plnkr.co/edit/eHLXMDd7e3vnjsf2BWWf?p=preview

来源

2015-07-28 corry

我检查了一点点你的Plunkr，我做了一些改变，只是为了使它的工作，你可以看到结果here。

请检查

如果指定用点的状态，parent must exists

家长必须存在

如果只注册一个单一的国家，像contacts.list ，您必须在某个时间点定义一个名为contacts的状态，否则不会注册状态。状态contacts.list将排队，直到定义联系人。如果你这样做，你不会看到任何错误，所以要小心你定义的父母为了让孩子得到正确的注册。

然后，当你宣布一个控制器，这样DetailController，它必须存在。

我希望那是你所期待的。

来源

2015-08-09 08:00:05

其中之一，我没有看到一个“DetailController”定义，您正在使用调用点击一个联系人。

其次，你可能想$状态传递给你的MainCtrl能够在上述修改后使用$ state.go

更新答案 - >

在你的应用的路由，要定义$状态为“接触”，所以你可能想使用，当你试图使用$ state.go

$state.go('contact', {contactId: row.entity.contactId});

来源

2015-07-28 16:21:16 svikasg

Tnx，我纠正了这些错误[forked plunker]（http://plnkr.co/edit/WOHKrlEWix1GYj0Q1nW8?p=preview），但点击仍然无效 – corry

我已经更新了新的建议。检查是否有效。 – svikasg

我已经尝试过与'联系'状态，仍然无法正常工作。 – corry

添加到您的控制器，这些线：

 function rowTemplate() { 
     return '<div ng-dblclick="grid.appScope.rowDoubleClick(row)" >' + 
       ' <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell>'+ 
       ' </div> ' + 
       '</div>'; 
    } 

    $scope.rowDoubleClick = function (row) { 
     alert(console.log(row.entity));    
    };

，并把你的gridOptions rowTemplate: rowTemplate(),

而且在rowDblClick重新路由到您的视图/你需要的模板。或者另一种解决方案可能是让rowDblClick上的观察者，然后重新路由到您的视图/模板。不是完整的解决方案，但至少有一些;）

来源

2015-07-30 14:25:06 LimoJoe

当点击行时，Angular UI Grid显示另一个视图

回答

相关问题