使用angularJs的数据表显示没有数据错误?

时间:2015-03-05 09:29:34

标签: javascript php angularjs laravel datatable

我想在angularjs中使用数据表。我已经编写了第一次在表中初始化和显示行的指令和数据表。 搜索或过滤时,它在表错误消息中没有显示数据。

指令代码

"use strict";
invoiceApp.directive('itemTable', function () {
return {
        restrict: 'E',
        replace: true,
        templateUrl: 'app/components/item/item_table.html',
        link: function (scope, table) {
            table.dataTable();

        }
    }
})

模板是,

<table my-table id="dt_basic" class="table table-bordered table-hover" width="100%">
<thead>                         
    <tr>
        <th class="text-center" width="10">
            <input type="checkbox" name="checkbox-inline" id="slt_all">
        </th>
        <th data-class="expand">Name</th>
        <th data-hide="phone">Description</th>
        <th data-hide="phone">Unit</th>
        <th>Rate</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="item in items">
        <td class="text-center"><input type="checkbox" checked="checked" name="checkbox-inline"></td>
        <td>{{item.name}}</td>
        <td>{{item.description}}</td>
        <td>{{item.unit}}</td>
        <td>AED {{item.rate}}</td>
    </tr>

控制器是,

    'use strict';
    invoiceApp.controller('itemController', ['$scope', 'ItemService', function ($scope, ItemService) {
$scope.items = //datas
        }]);

enter image description here 为什么会这样?

2 个答案:

答案 0 :(得分:1)

只需使用此角度数据表模块

添加datatable=",而不是创建新指令

HTML:

<table datatable="" class="row-border hover">
    <thead>
    <tr>
        <th>ID</th>
        <th>First name</th>
        <th>Last name</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>123</td>
        <td>Someone</td>
        <td>Youknow</td>
    </tr>
    <tr>
        <td>987</td>
        <td>Iamout</td>
        <td>Ofinspiration</td>
    </tr>
    </tbody>
</table>

JS:

angular.module('showcase', ['datatables']);

More detail AngularJs DatatableDownload

答案 1 :(得分:1)

使用&#34; ng&#34;在您的数据表中=&#34;&#34;指示.. 像这样:datatables =&#34; ng&#34; click here to see an example这解决了我的问题 因为我正在使用ng repeat来显示表格中的数据