I want to call a function myFunc on doubleclick of ui-grid row. for that I have used
<ng-dblclick="grid.appScope.myFunc()">
but it is not being called and showing no error.
here is the calling part of html :
<div ui-grid="gridOptions" ui-grid-selection class="gridStyle"
ng-dblclick="grid.appScope.myFunc()">
</div>
and here is the js script:
var myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
var app = angular.module('myApp', ['ui.grid', 'ui.grid.selection']);
app.controller('MainCtrl', function($scope) {
$scope.data = myData;
$scope.mySelections = [];
$scope.gridOptions = {
data :'data',
selectedItems : $scope.mySelections,
enableRowSelection: true,
//enableSelectAll: true,
selectionRowHeaderWidth: 35,
rowHeight: 35,
showGridFooter:true,
enableRowHeaderSelection :false,
multiSelect:false,
enableSelectAll:false,
enableFullRowSelection:true,
// noUnselect: true
}
$scope.myFunc = function ()
{
alert('you double clicled!');
};
.
.
.
.
});
Its typo in directive name.
It should be
ng-dblclick="grid.appScope.myFunc()"
instead of
ngdblclick="grid.appScope.myFunc()"
This should do it:
var app = angular.module('app', ['ui.grid', 'ui.grid.selection']);
app.controller('MainCtrl', ['$scope', function($scope) {
var dblClickRowTemplate =
//same as normal template, but with ng-dblclick="grid.appScope.myFunc()"
"<div ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.uid\" ng-dblclick=\"grid.appScope.myFunc()\" ui-grid-one-bind-id-grid=\"rowRenderIndex + '-' + col.uid + '-cell'\" class=\"ui-grid-cell\" ng-class=\"{'ui-grid-row-header-cell': col.isRowHeader }\" role=\"{{col.isRowHeader ? 'rowheader' : 'gridcell'}}\" ui-grid-cell></div>";
$scope.gridOptions = {
rowTemplate: dblClickRowTemplate,
//selectedItems: $scope.mySelections,
enableRowSelection: true,
//enableSelectAll: true,
selectionRowHeaderWidth: 35,
rowHeight: 35,
showGridFooter: true,
enableRowHeaderSelection: false,
multiSelect: false,
enableSelectAll: false,
enableFullRowSelection: true,
data: [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}]
}
$scope.myFunc = function() {
alert('you double clicled!');
};
}]);
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" />
<div ng-app="app" ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-selection class="gridStyle">
</div>
</div>
Let me know if you have any further questions.
来源:https://stackoverflow.com/questions/43031886/angular-js-ui-grid-double-click-on-row-not-working