title: Angularjs datatables - edit/delete options
body: <p>I have angularjs datatables, and I want to edit or delete table row. All documentations and examples are the only jquery solutions. I want to make edit inline or after click open popup with edit. Here is jquery solution <a href="https://editor.datatables.net/examples/styling/envelopeInTable.html" rel="nofollow noreferrer">https://editor.datatables.net/examples/styling/envelopeInTable.html</a> but I don't know how to convert this to angularjs, and here is angular way but, it is not working code, there is no any explanation to make edit. <a href="http://l-lin.github.io/angular-datatables/archives/#!/bindAngularDirective" rel="nofollow noreferrer">http://l-lin.github.io/angular-datatables/archives/#!/bindAngularDirective</a></p>
  
  <p>Here is my code</p>
  
  <pre><code>app.controller('benchBaseConfig', ['$compile', '$scope', '$http', '$location', 'DTOptionsBuilder', 'DTColumnBuilder',
  function RowSelect($compile, $scope, $http, $location, DTOptionsBuilder, DTColumnBuilder) {
      var vm = this;
      vm.message = '';
  
  
  
      function getUserTokenFromLocalStorage(localStorage) {
          var authData = [];
          for (key in localStorage) {
              if (key == "ls.authorizationData") {
                  authData = localStorage[key];
              }
  
          }
  
          var jsonObj = JSON.parse(authData);
          return jsonObj.token;
      };  
  
      vm.message = '';
      vm.someClickHandler = someClickHandler;
      vm.dtOptions = DTOptionsBuilder.newOptions()
          .withOption('ajax', {
              url: 'data.json',
              type: 'POST',
              headers: {
                  'xtoken': 'Bearer ' + getUserTokenFromLocalStorage(localStorage)
              }
          })
          // or here
          .withDataProp('data')
          .withOption('processing', true)
          .withOption('serverSide', true)
          .withOption('rowCallback', rowCallback)
          .withOption('createdRow', function(row, data, dataIndex) {
              $compile(angular.element(row).contents())($scope);
          })
          .withOption('headerCallback', function(header) {
              if (!vm.headerCompiled) {
                  vm.headerCompiled = true;
                  $compile(angular.element(header).contents())($scope);
              }
          })
          .withPaginationType('full_numbers')
      vm.dtColumns = [
          DTColumnBuilder.newColumn('serial_nr').withTitle('serial_nr'),
          DTColumnBuilder.newColumn('token').withTitle('token'),
  
          DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
          .renderWith(function(data, type, full, meta) {
              return '&lt;button class="btn btn-warning" ng-click="edit(' + full.serial_nr + ')"&gt;' +
                  '   &lt;i class="fa fa-edit"&gt;&lt;/i&gt;' +
                  '&lt;/button&gt;&amp;nbsp;' +
                  '&lt;button class="btn btn-danger" ng-click="delete(' + full.serial_nr + ')"&gt;' +
                  '   &lt;i class="fa fa-trash-o"&gt;&lt;/i&gt;' +
                  '&lt;/button&gt;';
          })
      ];
  
  
  
      function someClickHandler(info) {
          vm.message = info.id;
  
      }
  
      function rowCallback(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
          $('td', nRow).unbind('click');
          $('td', nRow).bind('click', function() {
              $scope.$apply(function() {
                  vm.someClickHandler(aData);
              });
          });
          return nRow;
      }
  
  
   $scope.edit = function(id) {
      console.log('Editing ' + id);
      // Edit some data and call server to make changes...
      // Then reload the data so that DT is refreshed
      $scope.dtOptions.reloadData();
  };
  $scope.delete = function(id) {
      console.log('Deleting' + id);
      // Delete some data and call server to make changes...
      // Then reload the data so that DT is refreshed
     return $http.delete('www.testtest.re/' + id).then(function() {
          // wait for the response to complete, or the deleted entry is still shown in the table
          $scope.dtOptions.reloadData();
     });        
  };
  }
  ]);
  </code></pre>
  
  <p>And here is html</p>
  
  <pre><code> &lt;div class="table-responsive ng-cloak"&gt;
      &lt;h3&gt;{{'KLUPE' | translate}} {{'KLUPE_SPEC' | translate}}&lt;/h3&gt;
      &lt;table id="strip_table" datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstance" class="dataTable row-border table-hover"&gt;
  
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>