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

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

在本文的帮助下，我使用datatable和angular js实现了显示数据的表

但我想使用相同的功能将数据绑定到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>

用户名
电子邮件
罗吉尼
地点名称
角色
活跃的
{{user.UserEmail}
{{user.LoginID}
{{user.LocationName}
{{user.RoleName}

我还想使用单击AddNewRecord按钮上的相同功能在表中添加新列

可能吗

如果是的话，那么如果有人在jsfiddle或任何编辑器中向我展示，这将是一件好事，并提前表示感谢

---

请使用Visual Studio编辑器中为演示创建的源代码，通过

datatable=“ng”

指示角度数据表使用“角度方式”：

如果按照上述操作，您可以完全跳过

部分。最后，我将把最后两个冗余的

减少为一个：

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

---

您可以按照davidkonrad的评论，就像下面的结构一样：

HTML:

服务：

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

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

---

你能不能加上控制器和指令码，让你的电脑有点亮code@SamuelJMathew您在本文中看到的所有代码我都有相同的代码，除了我在问题中编写的以HTML静态绑定为例的代码外，没有任何更改。我尝试了您的代码，但在控制台中出现错误“无法读取未定义的属性“match”，请帮我一个忙，先生，下载这个，你能在你这边修改一下吗，先生，提前谢谢。@padhiyar，看到一个带有C#backend:的angular项目很有趣：）请删除带有链接的评论（为了你自己）。您的问题是->

$scope.dtOptions=DTOptionsBuilder.newOptions（）.withOption（'ajax'，{url:/home/getdata'，键入：“POST”}）

您现在无法使用ajax，因为您正在使用angular

ng repeat进行渲染

！使用

dtOptions=DTOptionsBuilder.newOptions（）.withPaginationType（'full_numbers'）

等，即完全跳过

withOption（'ajax'）

，我确信它会起作用。我同意您的观点，先生，但在我的实际应用程序中，我必须调用服务并使用$http call强制调用获取数据。没有ajax我怎么能做到呢，先生？先生，你的意思是说我不必更改用HTML编写的表代码，对吗？我已经试过了，但datatable搜索和排序功能无法正常工作数据显示，但当我搜索某些内容或单击“排序标题数据”时，它会将表内的数据设置为空白。Ohhhh很高兴再次见到您，先生，让我看看它是否正常工作！是的，它的工作如预期的好先生，只是一个问题，它显示了两个图标排序和一些设计问题，但它是好的，我会找到它。再次感谢您一如既往地帮助我，先生，非常感谢您，也感谢davidkonrad。欢迎您，亲爱的，davidkonrad的回答也是可以接受的。没有详细检查，但应该可以工作。先生，需要一些帮助。您能告诉我如何设置第一列或任何不可排序的列吗？根据您的要求使用此列

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

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

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;
    }
}]);