如何在 ngtable 中选择过滤器? [英] How to have select filter in ngtable?
问题描述
我正在尝试在
修复提交:1ee441
<块引用>- ngtable 的自动宽度 w.r.t 它的数据.
呈现的 html 表格的列宽是使用 css 控制的.ng-table 没有添加任何特定的东西.您应该创建自己的样式规则来更改宽度.提示:您还可以在 html 标记中使用 colgroup 并为每个 <col> 标签分配一个特定的宽度
I am trying to have a select filter in ngtable. I followed this example but looks like if the select item has a space (eg: Not Installed or Not Running), then it does not work (filter). I am putting up a plunker for help.
There are couple of things I need help with
Select does not work with space in the select item.- Need exact filter match. Eg:
Runningselect should only showRunningand notNot Running. - Also in ngtable example when user clicks on the select it gives an extra blank entry which is removed once user selects and clicks the select filter again.
- Auto width of ngtable w.r.t it's data.
Updated code
var app = angular.module('main', ['ngTable'])
.controller('DemoCtrl', function($scope, $filter, ngTableParams, $log) {
$scope.tableData = [{"host":"UST490","org":"00ABHI","status":"images/icon/not_installed.png","selectId":"notInstalled","name":"Not Installed"},{"host":"UST4205","org":"00ABHI","status":"images/icon/not_installed.png","selectId":"notInstalled","name":"Not Installed"},{"host":"UST4089","org":"00ABHI","status":"images/icon/not_installed.png","selectId":"notInstalled","name":"Not Installed"},{"host":"UST4492","org":"00ABHI","status":"images/icon/not_installed.png","selectId":"notInstalled","name":"Not Installed"},{"host":"Bhan-1","org":"00ABHI","status":"images/icon/not_installed.png","selectId":"notInstalled","name":"Not Installed"},{"host":"UST1102","org":"00ABHI","status":"images/icon/x_mark-red.png","selectId":"notRunning","name":"Not Running"},{"host":"UST5202","org":"00ABHI","status":"images/icon/tick.png","selectId":"running","name":"Running"}];
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: $scope.tableData.length, // length of data
getData: function($defer, params) {
var filterData = params.filter() ? $filter('filter')($scope.tableData, params.filter()) : $scope.tableData;
var orderedData = params.sorting() ? $filter('orderBy')(filterData, params.orderBy()) : filterData;
var table_data = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length);
$defer.resolve(table_data);
}
});
//Took help from http://ng-table.com/#/demo/3-2
/*var inArray = Array.prototype.indexOf ?
function(val, arr) {
var temp = arr.indexOf(val);
return temp;
} :
function(val, arr) {
var i = arr.length;
while (i--) {
if (arr[i] === val) return i;
}
return -1
};*/
$scope.filterAgentStatus = function(column) {
var def = $q.defer(),
arr = [],
filterAgentStatus = [];
angular.forEach($scope.tableData, function(item) {
//if (inArray(item.name, arr) === -1) {
//arr.push(item.name);
if (jQuery.inArray(item.selectId, arr) === -1) {
arr.push(item.selectId);
filterAgentStatus.push({
'id': item.selectId,
'title': item.name
});
}
});
def.resolve(filterAgentStatus);
return def;
};
});
<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>
<body ng-app="main" ng-controller="DemoCtrl">
<table ng-table="tableParams" show-filter="true" class="table agentStatusTable text-center">
<tr ng-repeat="item in $data" height="10px" class="animate" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
<td data-title="'Agent Name'" class="text-center" header-class="text-center" width="60px" filter="{ 'host': 'text' }" sortable="'host'">{{ item.host }}</td>
<td data-title="'Org Id'" class="text-center" header-class="text-center" width="40px" filter="{ 'org': 'text' }" sortable="'org'">{{item.org}}</td>
<td data-title="'Status'" class="text-center" header-class="text-center" width="40px" filter="{ 'name': 'select' }" sortable="'status'" filter-data="filterAgentStatus($column)"><img ng-src="{{ item.status }}" /></td>
</tr>
</table>
</body>
Screenshot Below
- Need exact filter match
ng-table doesn't actually apply the filters the data - it's only responsible for collecting the filter values from the user.
In your getData function you've configured ng-table with, you are using the angular $filter service to apply the filter. It's this service that is responsible for doing the actual filtering. Therefore if you want an exact match behaviour you will need to use something other than $filter.
- ...extra blank entry which is removed once user selects and clicks the select filter again
UPDATE: I have edited my previous answer.
I've fixed this particular issue with ng-table. Here's a conversation about the problem: https://github.com/esvit/ng-table/pull/654#issuecomment-127095189
The commit for the fix: 1ee441
- Auto width of ngtable w.r.t it's data.
Column widths for the rendered html table are controlled using css. ng-table does not add anything specific. You should create your own style rules to change the widths. Tip: you can also use colgroup in the html markup and assign a specific width to each <col> tag
这篇关于如何在 ngtable 中选择过滤器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
