javascript - AngularJS 数据表

Question

我是 AngularJS 的新手。我遇到一个问题，我的数据没有显示在数据表中。谁能帮我解决这个问题吗？

我的代码

HTML 代码

<div class="content table-responsive table-full-width">
<table id="myTable" class="table table-striped table-hover" datatable="">
    <thead>
        <th>Account ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Registered On</th>
        <!--<th>Settings</th>-->
        <th>Status</th>
    </thead>
    <tbody>
        <tr ng-repeat="user in users">
            <td style="text-align:left;">{{user.account}}</td>
            <td style="text-align:left;">{{user.name}}</td>
            <td style="text-align:left;">{{user.email}}</td>

            <td style="text-align:left;" ng-model="dateVal">{{user.register}}</td>

            <td style="text-align:left;">

                <span class="label {{ user.status == 1 && 'label-success' || 'label-danger'}} " ng-click="updated(user.id)">
                                             {{ user.status == 1 && 'Active' || 'Inactive'}}
                                            </span>

            </td>

            <td>
                <a href="index.html#/edit_userpermission?id={{user.id}}" class="fa fa-cog" data-toggle="modal" data-target="#myModal"></a>
            </td>
        </tr>
    </tbody>
</table>

JS代码

 /* User Listing */
  var url = UserService.url+'users.php?token='+localStorage.getItem("token");

  $http.get(url).success( function(data) 
  {

     $('#myTable').DataTable();

     if(data.login != null ){
       $location.path( "/logout" );      
     }
     $scope.users = data;

  });

我得到的输出为...

当我单击排序选项时，它显示“表中没有可用数据”... 为什么会发生这种情况？ 等待回复。提前致谢

Answer 1

保重。

0- 您必须将数据表定义为 ng。所以，在你的行中:

<table id="myTable" class="table table-striped table-hover" datatable="">

您必须将其更改为:

<table id="myTable" class="table table-striped table-hover" datatable="ng">

1- 注意每行中的数据数量。因为if的个数不同。它会给你带来一些问题。

2- 您使用 Angular 数据表吗？您必须与 jquery 数据表一起使用。两者都可以使用。

您可以查看这个Plunkr:http://plnkr.co/edit/0lDhg9Mehn72E3rWAsLN?p=preview

另外，您可以在此处查看文档:https://l-lin.github.io/angular-datatables/#/angularWay