我正在尝试在基于组件的架构中将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
(对于控制器示例(,这让我感觉好多了。