Интеграция с AngularJS и DataTables

Я добавляю новую строку в DataTable, и она не подхвачена AngularJS. Может ли кто-нибудь показать, как связать эти два? В принципе, мне нужна, чтобы новая строка вела себя как исходная строка, т. Е. Выполняет функцию callGetRow. Буду признателен за любую оказанную помощь.Интеграция с AngularJS и DataTables

<html ng-app> 
<head> 
    <title>Example</title> 

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script src="http://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> 

<script> 
function RESTCall($scope, $http) { 
    $scope.callGetRow = function(line) { 
     alert(line); 
    }; 

    $scope.callAddNew = function() { 
     $('#example').DataTable().row.add(["2.0","Item 2", "Generic Desc", "2", 200]).draw(); 
    };  
} 

</script>  
</head> 

<body> 

<div ng-controller="RESTCall"> 
    <table class="compact" id="example" cellspacing="0" > 
     <thead> 
      <tr> 
       <th></th> 
       <th>Item</th> 
       <th>Description</th> 
       <th>Qty</th> 
       <th>List $</th> 
      </tr> 
     </thead> 

     <tbody> 
      <tr ng-click="callGetRow('1/0')" id="1.0"> 
       <td>1.0</td> 
       <td>Item 1</td> 
       <td>Generic Description</td> 
       <td>3</td> 
       <td>100</td> 
      </tr> 
     </tbody> 
    </table> 

<button class="btn" type="button" ng-click="callAddNew()">Add new</button> 
</div> 
</body> 
</html>

источник

2016-01-04 Leonid Alzhin

Существует а DataTables плагин для углового - может помочь вам: http://l-lin.github.io/angular-datatables/ – Sirko

Решение в приведенном ниже примере. В принципе, мне пришлось добавлять строки с добавлением строк с помощью DataTable и использовать AngularJS для создания контента, его компиляции и использования JQuery, чтобы добавить его в селектор в моем HTML.

вещей, которые необходимо сделать:

Удалить DataTables код
Поместите свои функции внутри контроллера и ввести угловые услуги мне нужно (сфера, обобщать, элемент)
использования AngularJS для создания контента и его компиляции
Добавить имя класса в tbody для JQuery для ap ПЭНД новой строки в

<html ng-app="problemApp"> 
<head> 
    <title>Example</title> 

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script src="http://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> 
    <link href="http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" /> 

<script> 

    var myApp = angular.module("problemApp", []); 

    myApp.controller("RESTCall", function ($scope, $compile, $element) { 

     $scope.callGetRow = function(line) { 
      alert(line); 
     }; 

     $scope.callAddNew = function() { 

      //define the element 
      $scope.content = "<tr ng-click=\"callGetRow('2/0')\" id=\"2.0\"><td>2.0</td><td>Item 2</td><td>Generic Description 2</td><td>1</td><td>200</td></tr>"; 

      //wrap it in jqLite 
      var tblElem = angular.element($scope.content); 

      //create a function to generate content 
      var compileFn = $compile(tblElem); 

      //execute the compilation function 
      compileFn($scope); 

      // add to DOM 
      $(".toappend").append(tblElem); 
     };  

    }); 

    $(document).ready(function() { 
     $('#example').dataTable(); 
    }); 

</script>  
</head> 

<body> 

<div ng-controller="RESTCall"> 
    <table class="compact" id="example"> 
     <thead> 
      <tr> 
       <th></th> 
       <th>Item</th> 
       <th>Description</th> 
       <th>Qty</th> 
       <th>List $</th> 
      </tr> 
     </thead> 

     <tbody class="toappend"> 
      <tr ng-click="callGetRow('1/0')" id="1.0"> 
       <td>1.0</td> 
       <td>Item 1</td> 
       <td>Generic Description</td> 
       <td>3</td> 
       <td>100</td> 
      </tr> 
     </tbody> 
    </table> 

<button class="btn" type="button" ng-click="callAddNew()">Add new</button> 
</div> 
</body> 
</html>

источник

2016-03-25 18:39:51

Я не одобряю, но, вероятно, вам нужно поставить $scope.$apply() после $('#example').DataTable().row.add(["2.0", "Item 2", "Generic Desc", "2", 200]).draw();

источник

2016-01-04 23:17:37

Спасибо за но он не работает: Ошибка: $ apply уже выполняется –

Интеграция с AngularJS и DataTables

ответ

Смежные вопросы