[英]angular js ui-grid double click on row not working
I want to call a function myFunc on doubleclick of ui-grid row. 我想在ui-grid行的doubleclick上调用函数myFunc。 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 : 这是html的调用部分:
<div ui-grid="gridOptions" ui-grid-selection class="gridStyle"
ng-dblclick="grid.appScope.myFunc()">
</div>
and here is the js script: 这是js脚本:
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. 如果您还有其他问题,请告诉我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.