Использование Угловые js с datatable js

Question

Я новичок и для Angular, и для datatable.

Я создаю приложение ASP.NET MVC с использованием этих двух js и хочу отображать записи в таблице.

Таблица отображает записи, но функция поиска и сортировки недоступна. Я имею ввиду, что не работает. Я не знаю, как интегрировать как для использования на одной странице.

Может ли кто-нибудь помочь мне выйти из этой проблемы?

Код:

Я $ scope.Customers который имеет поля Имя, телефон, электронная почта и многое другое ...

$scope.getCustomers = function() { 
     customerService.GetCustomers() 
     .then(
      function (response) { 
       console.log("Get Customer call"); 
       $scope.Customers = response.data.Result; 
      } 
     ); 
    } 

Здесь я получил список клиентов и переплетены успешно и мой HTML код это:

<table id="tblcustomers" class="table table-striped table-condensed table-bordered no-margin"> 
          <thead> 
           <tr> 
            <th>Customer Name</th> 
            <th>Address</th> 
            <th>Phone</th> 
            <th>Email</th> 
            <th>Active</th> 
            <th>Delete</th> 
           </tr> 
          </thead> 
          <tbody> 
           <tr ng-repeat="cust in Customers track by $index"> 
            <td><a href="#" ng-click="EditCustomer(cust)">{{cust.CustomerName}}</a></td> 
            <td>{{cust.Adddress_Line_1}}</td> 
            <td>{{cust.Phone}}</td> 
            <td>{{cust.Email}}</td> 
            <td ng-if="cust.IsActive == true"><span class="icon-check2"></span></td> 
            <td ng-if="cust.IsActive == false"><span class="icon-close"></span></td> 
            <td><a href="#" ng-click="DeleteCustomer(cust)"><span class="icon-trash"></span></a></td> 
           </tr> 
          </tbody> 
         </table> 

выход:

угловой модуль:

var app; 
(function() { 
    app = angular.module("ANG", []); 
})(); 

Answer 1

вы troed что-то, как поставить в директиве инициализацию DataTables?

что-то вроде:

"use strict"; 

angular.module("ANG") 
    .directive("grid", ["$timeout", function ($timeout) { 
     return { 
      restrict: "EA", 
      link: function (scope, element, attrs) { 

       $timeout(function() { 

        $(element).DataTable(); 
       }, 200); 
      } 
     } 
    }]); 

, а затем использовать его как:

<table id="tblcustomers" grid class="table table-striped table-condensed table-bordered no-margin"> 
          <thead> 
           <tr> 
            <th>Customer Name</th> 
            <th>Address</th> 
            <th>Phone</th> 
            <th>Email</th> 
            <th>Active</th> 
            <th>Delete</th> 
           </tr> 
          </thead> 
          <tbody> 
           <tr ng-repeat="cust in Customers track by $index"> 
            <td><a href="#" ng-click="EditCustomer(cust)">{{cust.CustomerName}}</a></td> 
            <td>{{cust.Adddress_Line_1}}</td> 
            <td>{{cust.Phone}}</td> 
            <td>{{cust.Email}}</td> 
            <td ng-if="cust.IsActive == true"><span class="icon-check2"></span></td> 
            <td ng-if="cust.IsActive == false"><span class="icon-close"></span></td> 
            <td><a href="#" ng-click="DeleteCustomer(cust)"><span class="icon-trash"></span></a></td> 
           </tr> 
          </tbody> 
         </table> 

Answer 2

Данные DataTable.js фильтра после того, как документ оказывается полностью. Используйте параметры DataTables после полного отображения документа. см демо здесь:

var app = angular.module('app', []); 
 

 
app.directive('testTable', function($timeout) { 
 
    return { 
 
    restrict: 'A', 
 
    link: function() { 
 
     $timeout(function() { 
 
     $('#tblcustomers').DataTable(); 
 
     }); 
 
    } 
 
    } 
 
}); 
 

 
var testCtrl = app.controller('testCtrl', function($scope) { 
 
    $scope.Customers = []; 
 

 
    var i = 20; 
 
    while (i > 0) { 
 
    $scope.Customers.push({ 
 
     CustomerName: 'test' + i, 
 
     Adddress_Line_1: 'testAddr' + i, 
 
     Phone: '000-000-00' + i, 
 
     Email: 'sample' + i + '@xxx.com', 
 
     IsActive: true 
 
    }); 
 
    i--; 
 
    } 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>DataTable test for Angular</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 
    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> 
 
</head> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="testCtrl"> 
 
    <table id="tblcustomers" test-table class="table table-striped table-condensed table-bordered no-margin"> 
 
     <thead> 
 
     <tr> 
 
      <th>Customer Name</th> 
 
      <th>Address</th> 
 
      <th>Phone</th> 
 
      <th>Email</th> 
 
      <th>Active</th> 
 
      <th>Delete</th> 
 
     </tr> 
 
     </thead> 
 
     <tfoot> 
 
     <tr> 
 
      <th>Customer Name</th> 
 
      <th>Address</th> 
 
      <th>Phone</th> 
 
      <th>Email</th> 
 
      <th>Active</th> 
 
      <th>Delete</th> 
 
     </tr> 
 
     </tfoot> 
 
     <tbody> 
 
     <tr ng-repeat="cust in Customers track by $index"> 
 
      <td><a href="#" ng-click="EditCustomer(cust)">{{cust.CustomerName}}</a></td> 
 
      <td>{{cust.Adddress_Line_1}}</td> 
 
      <td>{{cust.Phone}}</td> 
 
      <td>{{cust.Email}}</td> 
 
      <td ng-if="cust.IsActive == true"><span class="icon-check2"></span></td> 
 
      <td ng-if="cust.IsActive == false"><span class="icon-close"></span></td> 
 
      <td><a href="#" ng-click="DeleteCustomer(cust)"><span class="icon-trash"></span></a></td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</body> 
 

 
</html>