angular js ui-grid双击行不起作用 [英] angular js ui-grid double click on row not working

问题描述

我想在双击 ui-grid 行时调用函数 myFunc.为此我使用了

但它没有被调用并且没有显示错误.

这里是 html 的调用部分:

这里是js脚本:

 var myData = [{name: "Moroni", age: 50},{name: "Tiancum", 年龄: 43},{名称:雅各"，年龄:27}，{名称:尼腓"，年龄:29}，{名称:以诺斯"，年龄:34}];var app = angular.module('myApp', ['ui.grid', 'ui.grid.selection']);app.controller('MainCtrl', function($scope) {$scope.data = myData;$scope.mySelections = [];$scope.gridOptions = {数据:'数据'，selectedItems : $scope.mySelections,enableRowSelection: 真，//启用全选:真，selectionRowHeaderWidth: 35,行高:35，showGridFooter:true,enableRowHeaderSelection :false,多选:假，启用全选:假，enableFullRowSelection:true,//noUnselect: 真}$scope.myFunc = 函数 (){alert('你双击了！');};....});

解决方案

应该这样做:

var app = angular.module('app', ['ui.grid', 'ui.grid.selection']);app.controller('MainCtrl', ['$scope', function($scope) {var dblClickRowTemplate =//与普通模板相同，但使用 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 = {行模板:dblClickRowTemplate，//selectedItems: $scope.mySelections,enableRowSelection: 真，//启用全选:真，selectionRowHeaderWidth: 35,行高:35，showGridFooter: 真,enableRowHeaderSelection: 假，多选:假，启用全选:假，enableFullRowSelection: 真，数据:[{名称:莫罗尼"，年龄:50}，{name: "Tiancum", 年龄: 43},{名称:雅各"，年龄:27}，{名称:尼腓"，年龄:29}，{名称:以诺斯"，年龄:34}]}$scope.myFunc = function() {alert('你双击了！');};}]);

<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">

如果您有任何其他问题，请告诉我.

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!');
                          };



                    .
                    .
                    .
                    .

      });

解决方案

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.

这篇关于angular js ui-grid双击行不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！