如何使用 angular js 和带有额外行和列的数据表绑定数据

Question

您好，我正在使用 angularjs 和 ASP.NET MVC with datatable js 创建一个应用程序。

在 this 文章的帮助下，我已经使用 table 和 angular js 实现 table 显示数据。

但我想在 html 中使用相同的功能与列名称静态绑定数据，例如：

在文章中，作者使用以下方法完成工作：

<table id="entry-grid" datatable="" dt-options="dtOptions" 
       dt-columns="dtColumns" class="table table-hover">
</table>

但我想按照我的数据使用上述相同的功能使用 ng-repeat 来做到这一点：

<table id="tblusers" class="table table-bordered table-striped table-condensed datatable">
  <thead>
    <tr>
      <th width="2%"></th>
      <th>User Name</th>
      <th>Email</th>
      <th>LoginID</th>
      <th>Location Name</th>
      <th>Role</th>
      <th width="7%" class="center-text">Active</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="user in Users">
      <td><a href="#" ng-click="DeleteUser(user)"><span class="icon-trash"></span></a></td>
      <td><a class="ahyperlink" href="#" ng-click="EditUser(user)">{{user.UserFirstName}} {{user.UserLastName}}</a></td>
      <td>{{user.UserEmail}}</td>
      <td>{{user.LoginID}}</td>
      <td>{{user.LocationName}}</td>
      <td>{{user.RoleName}}</td>
      <td class="center-text" ng-if="user.IsActive == true"><span class="icon-check2"></span></td>
      <td class="center-text" ng-if="user.IsActive == false"><span class="icon-close"></span></td>
    </tr>
  </tbody>
</table>

我还想在 table 中添加新列，使用相同的功能点击按钮添加新记录。

可能吗？

如果是，那怎么可能，如果有人在 jsfiddle 或任何编辑器中向我展示，那就太好了，在此先感谢。

请DOWNLOAD在Visual Studio编辑器中创建用于演示的源代码

Answer 1

指示 angular-dataTables 使用 datatable="ng" 的 "angular way" :

<table id="entry-grid" 
   datatable="ng" 
   dt-options="dtOptions" 
   dt-columns="dtColumns" 
   class="table table-hover">
</table>

然后更改 dtColumns 以解决列索引而不是 JSON 条目：

$scope.dtColumns = [
   DTColumnBuilder.newColumn(0).withTitle('').withOption('width', '2%'),
   DTColumnBuilder.newColumn(1).withTitle('User Name'),
   DTColumnBuilder.newColumn(2).withTitle('Email'),
   DTColumnBuilder.newColumn(3).withTitle('LoginID'),
   DTColumnBuilder.newColumn(4).withTitle('Location Name'),
   DTColumnBuilder.newColumn(5).withTitle('Role Name'),
   DTColumnBuilder.newColumn(6).withTitle('Active').withOption('width', '7%') 
];

如果按照上述操作，您可以完全跳过 <thead> 部分。最后，我会将最后两个多余的 <td> 减少为一个：

<td class="center-text">
  <span ng-show="user.IsActive == true" class="icon-check2"></span>
  <span ng-show="user.IsActive == false" class="icon-close"></span>
</td>

Answer 2

您可以在评论中关注 davidkonrad 的 answer，就像以下结构：

HTML:

<table id="entry-grid" datatable="ng" class="table table-hover">
            <thead>
                <tr>
                    <th>
                        CustomerId
                    </th>
                    <th>Company Name </th>
                    <th>Contact Name</th>
                    <th>
                        Phone
                    </th>
                    <th>
                        City
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="c in Customers">
                    <td>{{c.CustomerID}}</td>
                    <td>{{c.CompanyName}}</td>
                    <td>{{c.ContactName}}</td>
                    <td>{{c.Phone}}</td>\
                    <td>{{c.City}}</td>
                </tr>
            </tbody>
        </table>

像这样在 angular 中创建控制器：

var app = angular.module('MyApp1', ['datatables']);
app.controller('homeCtrl', ['$scope', 'HomeService',
    function ($scope, homeService) {

        $scope.GetCustomers = function () {
            homeService.GetCustomers()
                .then(
                function (response) {
                    debugger;
                    $scope.Customers = response.data;
                });
        }

        $scope.GetCustomers();
    }])

服务：

app.service('HomeService', ["$http", "$q", function ($http, $q) {

    this.GetCustomers = function () {
        debugger;
        var request = $http({
            method: "Get",
            url: "/home/getdata"
        });
        return request;
    }
}]);

如何使用 angular js 和带有额外行和列的数据表绑定数据

How to bind data using angular js and datatable with extra row and column

datatables

angularjs

angular-datatables