无法使 NgTable 与 AngularJs 1.5 一起工作



我正在尝试在基于组件的架构中将NgTable与angularjs 1.5集成(因此,没有旧式控制器(。

NgTable 控件(筛选器、排序图标(出现,但它们似乎根本不起作用,因此它们不会筛选,也不会排序。

这是我的代码

---活动列表模块.js---

 angular.module('activityList', ['ngTable']);

---活动列表组件.js---

(function(){
'use strict';
angular.
  module('activityList').
  component('activityList', {
    templateUrl: "app/activity-list/activity-list.html",
    controller: ['NgTableParams', function (NgTableParams) {
        var self=this;
          self.activitiesForm=[{id:0,description:"att0"},{id:1,description:"att1"},{id:2,description:"att2"}];
          self.tableParams = new NgTableParams({}, { dataset: self.activitiesForm});

    }]
  });
  })();

---活动列表.html----

  <div style="margin:20pt">
  <h3>Manage Activities</h3>
 <div style="margin:20pt">
<h3>Manage Activities</h3>
 <div class="row" style="margin-left:20pt" >
<table id="myViewTable" ng-table="$ctrl.tableParams" class="table" show-filter="true" class="table actTable" style="width:95%;table-layout: fixed;" >
<tbody>
<tr ng-repeat="projectActivity in $ctrl.activitiesForm track by projectActivity.id">
<td data-title="'Id'">{{projectActivity.id}}</td> 
<td data-title="'description'" filter="{ description: 'text'}" sortable="'description'">{{projectActivity.description}}</td>
</tr>
</tbody>
</table>
</div>
</div>

当然,该组件是使用另一个页面中的标记<activity-list></activity-list>调用的。

我正在使用 AngularJs 1.5.8 和 ng-table 3.0.1。

我做错了什么,或者 AngularJs>= 1.5 和 ng-table 之间不兼容?

这是 plnkr

PS 在最后一种情况下,我该怎么办?智能表是否与 AngularJs 1.5 兼容?

在ng-table GIT存储库中提出问题后,我从ng-table的创建者那里得到了一个工作示例,我可以看看。

关键在于使用控制器变量,而不是由ng-table生成的$data变量。因此,在"新样式"组件的情况下,问题解决了

      <tr ng-repeat="projectActivity in $ctrl.activitiesForm track by projectActivity.id">

     <tr ng-repeat="projectActivity in $data track by projectActivity.id"> 

在"旧式"控制器的情况下,解决了更改

     <tr ng-repeat="user in vm.data">

     <tr ng-repeat="user in $data">

我不太喜欢这个解决方案,因为它增加了一种全局,但它有效。

编辑

它也可以使用

$ctrl.tableParams.data(对于组件示例(和vm.tableParams.data(对于控制器示例(,这让我感觉好多了。

最新更新