Angularjs ngGrid双击行以打开用于编辑行的弹出窗口

Angularjs ngGrid双击行以打开用于编辑行的弹出窗口,angularjs,ng-grid,Angularjs,Ng Grid,如何在ng Grid中实现双击事件?更具体地说,我希望双击打开一个弹出模式(角度UI模式)进行编辑 关于如何做到这一点有什么想法吗?来自@AardVark71对问题的评论中的链接 将以下Javascript文件添加到可以从应用程序访问的目录中,并且不要忘记在启动时加载它 /* DoubleClick row plugin */ function ngGridDoubleClick() { var self = this; self.$scope = null; se

如何在ng Grid中实现双击事件?更具体地说,我希望双击打开一个弹出模式(角度UI模式)进行编辑


关于如何做到这一点有什么想法吗?

来自@AardVark71对问题的评论中的链接

将以下Javascript文件添加到可以从应用程序访问的目录中,并且不要忘记在启动时加载它

/* 
 DoubleClick row plugin
*/

function ngGridDoubleClick() {
    var self = this;
    self.$scope = null;
    self.myGrid = null;

    // The init method gets called during the ng-grid directive execution.
    self.init = function(scope, grid, services) {
        // The directive passes in the grid scope and the grid object which
        // we will want to save for manipulation later.
        self.$scope = scope;
        self.myGrid = grid;
        // In this example we want to assign grid events.
        self.assignEvents();
    };
    self.assignEvents = function() {
        // Here we set the double-click event handler to the header container.
        self.myGrid.$viewport.on('dblclick', self.onDoubleClick);
    };
    // double-click function
    self.onDoubleClick = function(event) {
        self.myGrid.config.dblClickFn(self.$scope.selectedItems[0]);
        self.$scope.$apply();
    };
}
定义一个函数来处理双击并更新网格选项,如下所示:

$scope.myDblClickHandler = function(rowItem) {
// rowItem is actually the entity of the row ...
}

$scope.gridOptions = {
    // other config here...
    dblClickFn: $scope.myDblClickHandler,
    plugins: [ngGridDoubleClick]
}

此函数不必在$scope上才能工作。

在ng grid 2.0.11中,只需在行模板中调用ng dblclick指令即可

$scope.gridOptions = {
    data: 'gdDtA',
    rowTemplate: '<div ng-dblclick="foo(row)" ng-style="{\'cursor\': row.cursor, \'z-index\': col.zIndex() }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}" ng-cell></div>',        
};

$scope.foo = function(r) {
    console.log(r);
}
$scope.gridOptions={
数据:“gdDtA”,
行模板:“”,
};
$scope.foo=函数(r){
控制台日志(r);
}

请参见:

将ngDblclick添加到行模板中。另请参见此处的注释:这种方法假设您已为行启用了选择。我可能遗漏了一些内容,您这样做而不是像@Rodolpho的答案那样使用
ng dblclick
?我写我的答案时,他的答案不存在。我计划很快尝试他的答案,看看是否比我的更好。请注意,即使您使用双击编辑单元格,也可以这样做。该函数将被调用,单元格(如果可编辑)将打开输入框。如果您有一个可编辑的条件,并且希望某些单元格弹出某些内容,而其他单元格正常编辑,则此选项非常有用。不确定我是如何错过发布此内容的,我将尝试使用它,而不是使用我的解决方案。