Question

我正在使用角度ui网格。 http://ui-grid.info/docs/#/tutorial/102_sorting 我想点击标题图标V时显示提醒。目前，当我点击hello图标时，它会显示v文字。点击图标后可以显示警告吗？

这是我的代码： http://plnkr.co/edit/UAElQb8dl9qr5Cwmjg6q?p=preview

 $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
    .success(function(data) {
      $scope.gridOptions1.data = data;
    });

Answer 1

现场演示 here 。

您可以通过 headerCellTemplate 和 extrenal-scopes 访问标题单元格点击事件：

文档：Ui-grid custom templates

当entity.merge值为true时，自定义行模板会将所有单元格合并在一起。

您可以在行模板中使用grid.appScope来访问控制器范围内的元素。

＆＃13;

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) {
  $scope.gridOptions1 = {
    enableSorting: true,
    columnDefs: [{
      field: 'name'
    }, {
      field: 'gender'
    }, {
      field: 'company',
      enableSorting: false,
      headerCellTemplate: ''
      +'<div role="columnheader" class="sortable" aria-sort="none">'
        +'<div role="button" class="ui-grid-cell-contents ui-grid-header-cell-primary-focus">'
          +'<span class="ui-grid-header-cell-label ng-binding">Company</span>'
        +'</div>'
        +'<div role="button" class="ui-grid-column-menu-button" aria-label="Column Menu" ng-click="grid.appScope.showAlert();">'
          +'<i class="ui-grid-icon-angle-down" aria-hidden="true">&nbsp;</i>'
        +'</div>'
      +'</div>'
    }],
    onRegisterApi: function(gridApi) {
      $scope.grid1Api = gridApi;
    }
  };

  $scope.showAlert = function() {
    alert('ts');
  }


  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
    .success(function(data) {
      $scope.gridOptions1.data = data;
    });
}]);

＆＃13;

.grid {
  width: 500px;
  height: 200px;
}

＆＃13;

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">

  <div id="grid1" ui-grid="gridOptions1" external-scopes="externalScopes" class="grid"></div>

 
</div>


    <script src="app.js"></script>
  </body>
</html>

＆＃13;

<强> [注意：]

我不确定这是你想要的警报。如果是或接近，则此标题单元格模板是一个非常简单的演示，有关默认标题单元格模板的更多信息是here

如何在角度js中找到标题上的点击事件？

1 个答案: