JavaScript

I am working with AngularJS and angular-datatable and I want to work with the event in a row, I have setup the controller to listen the event but it is not work. My code is :

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

app.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',
  });
});

Thanks for all.

Answer

Since you are using the angular way for rendering, why not use ng-click as well :

<tr ng-repeat="empleado in empleadoList.empleados" ng-click="click(empleado)">

$scope.click = function(empleado) {
  console.log(empleado.apellidoPaterno+' clicked')
}

Angular – Datatable click row event

Advertisement

Answer