angularjs – 如何使用角度js和datatable与额外的行和列绑定数据

发布时间：2020-12-17 09:27:13 所属栏目：安全来源：网络整理

导读：您好,我正在使用具有datatable js的 angularjs和ASP.NET MVC创建一个应用程序. 我已经通过this文章的帮助,实现了使用带有角度j的datatable的数据表. 但是我想使用相同的功能将数据绑定到html中的列名称,如：在文章作者中已经完成了以下工作： table id="ent

您好,我正在使用具有datatable js的 angularjs和ASP.NET MVC创建一个应用程序.

我已经通过this文章的帮助,实现了使用带有角度j的datatable的数据表.

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

我也想在表中添加新的列,使用相同的功能按钮点击添加新记录.

可能吗？

如果是,如果有可能在jsfiddle或任何编辑器中显示我,它将是很好的,并提前感谢.

请DOWNLOAD源代码在Visual Studio Editor中创建用于演示

你可以使用davidkonrad建议 link在评论中就像下面的结构：

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>

创建控制器角度如下：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!