ng-click not working in DataTable js RSS

• • Reply
  forhadrk

  Member

  3 Points

  8 Posts

  ng-click not working in DataTable js

  Jan 31, 2017 04:37 PM|forhadrk|LINK

  I am working in MVC using WEB API and Angular js.. Using grid for DataTable js. But in Datatable js ng-click not working.. Need some help..

  My code is for 

  app.controller('CreateUserController', function ($scope, $http, createUserService) {
      $scope.createUserData = null;
      createUserService.getallrecords().then(function (d) {
          $scope.BindGridData(d.data.Data);
      }, function (response) {
          alert('error occurred' + response.data.ExceptionMesage);
      });
  
      $scope.LoginUser = {
          LoginUserID: '',
          UserCode: '',
          UserName: '',
          Password: '',
          IsActive: ''
      };
  
      $scope.clear = function () {
          $scope.LoginUser.LoginUserID = '',
          $scope.LoginUser.UserCode = '',
          $scope.LoginUser.UserName = '',
          $scope.LoginUser.Password = '',
          $scope.LoginUser.IsActive = ''
      };
      ////Add new record
  
      $scope.save = function () {
          if ($scope.LoginUser.UserCode != '' && $scope.LoginUser.UserName != '' && $scope.LoginUser.Password != '') {
              $http({
                  method: 'POST',
                  url: '/api/CreateUserAPI/CreateLoginUser',
                  data: $scope.LoginUser
  
              }).then(function successCallback(response) {
                  //$scope.personData.push(response.data);
                  $scope.clear();
                  alert('Inserted successfully!!');
                  //$scope.addnewdiv = false;
              }, function errorCallback(response) {
  
                  alert('error:' + response.data.ExceptionMesage);
              });
          }
          else {
              alert('Please enter all the values!!');
          }
  
      };
      $scope.BindGridData = function (data) {
          var returnPIData;
          var _NoDataExists = 0;
          var len = 0;
          var _isDataExists = 0;
  
          returnPIData = data;
          _isDataExists = 1;
  
          if (_isDataExists > 0) {
              var arrayReturn = [];
              var results = returnPIData;
              for (var i = 0, len = results.length; i < len; i++) {
                  var result = results[i];
                  arrayReturn.push([result.LoginUserID, result.UserCode, result.Password, result.IsActive, "<a class='btn btn-sm btn-primary float-right' ng-click=EditCreateUser(" + result.LoginUserID + ")><i class='fa fa-pencil fa-lg'></i></a>", "<a class='btn btn-sm btn-danger float-right' ng-click=DeleteCreateUser(" + result.LoginUserID + ")><i class='fa fa-trash fa-lg'></i></a>"])
              }
              $("#tblETPCategory").DataTable({
                  destroy: true,
                  responsive: true,
                  data: arrayReturn,
                  columns: [
                  { 'sTitle': 'LoginUserID' },
                  { 'sTitle': 'UserCode' },
                  { 'sTitle': 'Password' },
                  { 'sTitle': 'IsActive' },
                  { 'sTitle': 'Edit' },
                  { 'sTitle': 'Delete' }]
              });
          }
      }
      ////Edit records
      $scope.EditCreateUser = function (LoginUserID) {
          alert("EDIT " + LoginUserID);
      };
  	    ////Edit records
      $scope.DeleteCreateUser = function (LoginUserID) {
          alert("DELETE " + LoginUserID);
      };
      
  });

  Grid is load Properly. But when click in Edit and Delete button in grid it is not working.

  Need some help for this problem..

• • Reply
  raju dasa

  All-Star

  15176 Points

  3888 Posts

  Re: ng-click not working in DataTable js

  Mar 02, 2017 07:35 AM|raju dasa|LINK

  Hi,

  If your Datatable js rendering the template for grid dynamically, then there is chance of angular may not detect the change while compiling the template.

  Happy Coding ! Mark as Answer if it helps.
  rajudasa.blogspot.com  ||  rajudasa-tech