Dav*_*arr 12 angularjs ngtable
我正在尝试使用ngTable构建一个表,但使用不同于ngTable页面示例中描述的自定义过滤.
我想要过滤,但我不希望ngTable呈现过滤器选择器.我想自己渲染它们(在表格上方),然后在我的"getData()"方法中引用它们.
前面提到的例子没有解释任何一种机制是如何工作的.我不知道在每个"td"元素的"filter"属性中确切需要指定什么.我理解AngularJS $ filter函数的基本语法,但我不清楚ngTable在做什么.从一个例子看,我看起来只能进行"等于"检查,这只会选择相关列值等于过滤值的行.这不是我需要的.
我的表有几列.其中两个被称为"key"和"failed",分别是string和boolean.当我在表格上方渲染这些过滤字段时,我需要为"失败"过滤器设置自定义标签.过滤"key"列应该将过滤器值与"key"值的任何子字符串匹配.例如,如果我的键值为"abc","abac"和"def",则过滤值"a"将导致前两个条目显示,而不显示"def"条目.
更新:
与此相关,我希望我能弄清楚如何做这样的事情:
假设我的表元素中有一个ngRepeat表达式,使用"standard"angularjs过滤器:
"item in $data | customfilter:param | anothercustomfilter:param"
我们知道这不太有效,因为这些过滤器仅适用于从"getData()"方法获得的一个页面切片.我真正希望能够在我的"getData()"方法中做的只是访问整个过滤器链,包括参数表达式,并简单地将一个不同的数组传递给它,作为整个原始数据列表,而不仅仅是页面切片.
与此同时,我需要通过在正常处理中执行该过滤器链来"关闭"过滤angularjs自己做的事情.
这听起来很难,但我发现当前的API需要在html和javascript之间进行大量的耦合.如果html可以指定所需的过滤,那将是很好的,javascript将只使用整个过滤器链,但在整个数据列表上使用它,而不仅仅是页面切片.
更新:
以下是我的HTML的相关摘录:
<label for="keysFilter">Filter Keys:</label>
<input id="keysFilter" type="text" ng-model="keysFilter"/>
<label for="showOnlyFailed">Show only queries that failed?</label>
<input id="showOnlyFailed" type="checkbox" ng-model="showOnlyFailed"/>
<table ng-table="tableParams" table-pagination="custom/pages" class="table">
<tr ng-repeat="queryInfo in $data"> <!-- | filterFailed:showOnlyFailed | filterMatchingKeys:keysFilter -->
这是我的tableParams代码:
$scope.tableParams = new ngTableParams({
page: 1,
count: 10,
sorting: {
lastRun: 'desc'
}
},
{
debugMode: true,
total: $scope.completedQueries.length,
getData: function($defer, params) {
var orderedData = params.sorting() ?
$filter('orderBy')($scope.completedQueries, params.orderBy()) :
data;
orderedData = $filter('filterFailed')(orderedData, $scope.showOnlyFailed);
orderedData = $filter('filterMatchingKeys')(orderedData, $scope.keysFilter);
params.total(orderedData.length);
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(),
params.page() * params.count()));
}
});
请注意,我使用过这个ngTable不使用"$ data"列表,只是遍历我的"completedQueries"列表.当它像这样工作时,当我点击"仅显示失败的查询"复选框或在"keysFilter"输入字段中输入文本时,列表会立即更改.
但是,现在我正在使用"$ data"列表,当我更改其中任何一个字段时没有任何反应.事实上,我甚至为这两个领域添加了$ watch-es,而且他们都没有开火.但是,当我对这两个字段中的任何一个进行更改时,我知道正在重新评估表数据,因为其中两列的数据预计为millis值,并且我在这些列上有一个自定义过滤器,用于将值转换为一个"很久以前"的英语表达,比如"30秒前"或"2分钟前",每当我更改其中一个输入字段时,我看到表中的那些表达式发生了变化,但它仍然没有适当的过滤.
如果重要的话,这里是我添加到我的范围的$ watch-es.这些从未出现过:
$scope.$watch("showOnlyFailed", function() {
$scope.tableParams.reload();
});
$scope.$watch("keysFilter", function() {
$scope.tableParams.reload();
});
请注意,当我有这些注释时,我在看到"getData()"方法后看到以下错误:
Run Code Online (Sandbox Code Playgroud)Error: settings.$scope is null @http://localhost:8000/js/diag/libs/ng-table.src.js:411 qFactory/defer/deferred.promise.then/wrappedCallback@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:11046 qFactory/ref/<.then/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:11132 Scope.prototype.$eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:12075 Scope.prototype.$digest@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:11903 Scope.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:12179 bootstrap/doBootstrap/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:1341 invoke@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:3762 bootstrap/doBootstrap@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:1340 bootstrap@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:1353 angularInit@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:1301 @http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js:21048 n.Callbacks/j@http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2 n.Callbacks/k.fireWith@http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2 .ready@http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2 K@http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js:2 http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js Line 9509
这是相关的代码块:
$defer.promise.then(function (data) {
settings.$loading = false;
log('ngTable: current scope', settings.$scope);
if (settings.groupBy) {
self.data = settings.$scope.$groups = data;
} else {
self.data = settings.$scope.$data = data; // line 411
}
settings.$scope.pages = self.generatePagesArray(self.page(), self.total(), self.count());
});
更新:
这是我的plunkr,它表明更改外部过滤器字段不起作用.我还有两个$ watch-es评论出来试图纠正这个问题.当我评论这些时,我在ng-table中得到一个错误,抱怨null范围.
更新:
我尝试将"newvalue,oldvalue"参数添加到我的$ watch-es(我更新了plunkr).现在,对字段的更改会导致表更新.不幸的是,我仍然在ng-table的第411行获得了堆栈跟踪.
您不需要手表,也不需要您创建的自定义过滤器.实际上,角度的'过滤器'过滤器功能非常强大.
您只需创建一个对象,使用与您的项目字段匹配的成员来跟踪您的过滤器值.像这样的东西.
$scope.filter = {
key: undefined,
failed: undefined
}
那么你可以getData使用回调内部params.filter().我在这里更新了你的plunker.您还可以查看以下示例:
var app = angular.module('main', ['ngTable']);
app.controller('MainCtrl', function($scope, $http, $filter, ngTableParams) {
$scope.completedQueries = [{"key":"abc000","lastRun":123,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc001","lastRun":1234,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc002","lastRun":111111111,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":true},{"key":"abc003","lastRun":123,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc004","lastRun":1234,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":true},{"key":"abc005","lastRun":111111111,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc006","lastRun":123,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc007","lastRun":1234,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc008","lastRun":111111111,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc009","lastRun":123,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc010","lastRun":1234,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc011","lastRun":111111111,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc012","lastRun":123,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":true},{"key":"abc013","lastRun":1234,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc014","lastRun":111111111,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc015","lastRun":123,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":true},{"key":"abc016","lastRun":1234,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false},{"key":"abc017","lastRun":111111111,"lastSuccessfulTime":9999,"elapsedTime":456,"rows":10,"failed":false}];
$scope.filter = {
key: undefined,
failed: undefined
};
$scope.tableParams = new ngTableParams({
page: 1,
count: 10,
filter: $scope.filter
}, {
debugMode: true,
total: $scope.completedQueries.length,
getData: function($defer, params) {
var orderedData = params.sorting() ? $filter('orderBy')($scope.completedQueries, params.orderBy()) : data;
orderedData = $filter('filter')(orderedData, params.filter());
params.total(orderedData.length);
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js"></script>
<div ng-app="main" ng-controller="MainCtrl">
<label for="keysFilter">Filter Keys:</label>
<input id="keysFilter" type="text" ng-model="filter.key"/>
<label for="showOnlyFailed">Show only queries that failed?</label>
<input id="showOnlyFailed" type="checkbox" ng-model="filter.failed"/>
<br/>
<table ng-table="tableParams" class="table">
<tr ng-repeat="queryInfo in $data">
<td data-title="'Key'" sortable="'key'">{{queryInfo.key}}</td>
<td data-title="'Last Run'" sortable="'lastRun'">{{queryInfo.lastRun}}</td>
<td data-title="'Last Successful Run'" sortable="'lastSuccessfulRun'">{{queryInfo.lastSuccessfulRun}}</td>
<td data-title="'Elapsed Time'" sortable="'elapsedTime'">{{queryInfo.elapsedTime}} ms</td>
<td data-title="'Rows'" sortable="'rows'">{{queryInfo.rows}}</td>
<td data-title="'Failed'" sortable="'failed'">{{queryInfo.failed}}</td>
<td data-title="''"><button class="btn">Detail</button></td>
</tr>
</table>
<div>看来您遇到了ng-table自身问题，这是一个没有得到很好支持的第三方库。
作为这一点的证据，请查看他们的 Github 页面，该页面有 200 多个未解决的问题和 1,200 颗星 (1:6)：
https://github.com/esvit/ng-table
与此相比，像 那样的图书馆D3.js享有《纽约时报》的全面技术和财务支持。它有 150 期和超过30,000颗星 (1:200)。
https://github.com/mbostock/d3
大量未解决的问题意味着人们发现错误的速度比开发人员解决错误的速度快。开发人员很可能已经转向新项目，并且不再对维护这个库感兴趣。
换句话说，您遇到了库本身的功能限制。当这种情况发生时，你有两个选择，
遗憾的是我已经研究过这个，现在还没有一个真正好的角度表库
只是这样这并不是完全无赖的，也许UI-Grid可以帮助你ng-table失败的地方。
披露：我不隶属于 ui-grid，并且对于它是否好仍然持观望态度
| 归档时间： |
|
| 查看次数： |
30718 次 |
| 最近记录： |