angular js ui-grid double click on row not working

限于喜欢 提交于 2019-12-06 05:10:13

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!