javascript - Angular - 数据表点击行事件

标签 javascript angularjs angular-datatables

我正在使用 AngularJS 和 angular-datatable 并且我想连续处理事件,我已经设置了 Controller 来监听事件但是它不起作用。我的代码是:

html

<div  class="panel panel-flat">
    <div class="panel-heading">
        <h6 class="panel-title">Planilla</h6>
    </div>
    <div class="panel-heading"> 
    <table class="table datatable-basic table-hover" datatable="ng" dt-options="empleadoList.dtOptions"  dt-column-defs="empleadoList.dtColumnDefs" >
        <thead>
            <tr>
                <th style="width: 30px;">Nro.</th>  
                <th>Nombre Completo</th>
                <th class="col-md-2">DNI</th>
                <th class="col-md-2">Celular</th>
                <th class="col-md-2">Teléfono</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="empleado in empleadoList.empleados">
                <td style="width: 30px;">{{$index + 1}}</td>
                <td> <span class="text-muted"><i class="icon-user"></i>{{empleado.apellidoPaterno}} {{empleado.apellidoMaterno}} {{empleado.nombre}}</span></td>
                <td><span class="text-success-600"><span class="status-mark border-blue position-left"></span>{{empleado.dni}}</span></td>
                <td><span class="text-success-600"><i class="icon-mobile position-left"></i> {{empleado.celular}}</span></td>
                <td><h6 class="text-semibold"><i class="icon-phone position-left"></i> {{empleado.telefono}}</h6></td>
            </tr>
        </tbody>
    </table>
    </div>
</div>

Controller .js

App.controller('EmpleadoListController', function($scope,$resource,EmpleadoService,DTOptionsBuilder,DTColumnDefBuilder) {

$scope.dtOptions = DTOptionsBuilder.newOptions()
    .withDisplayLength(10)
    .withOption('bLengthChange', false)
    .withPaginationType('full_numbers')
    .withOption('rowCallback', rowCallback);
$scope.dtColumnDefs = [
                   DTColumnDefBuilder.newColumnDef(0),
                   DTColumnDefBuilder.newColumnDef(1),
                   DTColumnDefBuilder.newColumnDef(2),
                   DTColumnDefBuilder.newColumnDef(3),
                   DTColumnDefBuilder.newColumnDef(4)
               ];

function rowCallback(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
    $('td', nRow).unbind('click');
    $('td', nRow).bind('click', function() {
        $scope.$apply(function() {
            console.log('click row');
        });
    });
    return nRow;
}

EmpleadoService.fetch().then(
        function(response){
            return $scope.empleadoList = { empleados: response.data};
        }, 
        function(errResponse){
            console.error('Error while fetching users');
            return $q.reject(errResponse);
        }
);
});

应用程序.js

'use strict';
var App = angular.module('myApp', ['ngRoute','ngResource','datatables']);
App.config(function($routeProvider) {
  var resolveEmpleados = {
    empleados: function (EmpleadoService) {
    return EmpleadoService.fetch();
  }
 };

$routeProvider
 .when('/planilla', {
    controller:'EmpleadoListController as empleadoList',
    templateUrl:'static/js/planilla.html',
  });
});

谢谢大家。

最佳答案

既然你使用的是 Angular 渲染方式,为什么不使用 ng-click 呢:

<tr ng-repeat="empleado in empleadoList.empleados" ng-click="click(empleado)">
$scope.click = function(empleado) {
  console.log(empleado.apellidoPaterno+' clicked')
}

关于javascript - Angular - 数据表点击行事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38022763/

相关文章:

javascript - 按下句号键时执行 JavaScript 函数

javascript - PHP 和 Angular $http ajax 的问题

带有 *ngIf 的 Angular 数据表显示错误

javascript - Angular 数据表不通过列重新排序进行过滤

javascript - Bootstrap 4 : Fixing and fading in footer at the bottom of the page

javascript - 隐藏选择字段中的额外数据?

javascript - 如何在 JavaScript 函数中使用 Angular 变量作为参数

javascript - 禁用列排序不适用于多个 angularjs 数据表

javascript - 金额始终显示小数点后 2 位

javascript - 对字符串数字进行排序,angularjs