Question

我正在使用这两个j创建ASP.NET MVC应用程序，并希望在表中显示记录。

表显示记录但搜索和排序工具不可用我的意思是不运行。我不知道如何将两者集成在一个页面中使用。

任何人都可以帮我解决这个问题吗？

代码：

我有$ 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

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>

Answer 2

你有没有想过把数据表初始化的指令放进去？

类似的东西：

    "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>

将Angular js与数据表js

2 个答案: