如何在 ngtable 中选择过滤器？
Posted
技术标签:
【中文标题】如何在 ngtable 中选择过滤器？【英文标题】：How to have select filter in ngtable? 【发布时间】：2015-10-01 17:03:03 【问题描述】：我正在尝试在ngtable 中使用select 过滤器。我关注了this example，但看起来如果选择项有空格（例如：Not Installed 或Not Running），那么它不起作用（过滤器）。我正在发送plunker 寻求帮助。
有几件事我需要帮助
Running 选择应该只显示Running 而不是Not Running。
同样在ngtable example 中，当用户单击选择时，它会提供一个额外的空白条目，一旦用户选择并再次单击选择过滤器，该条目就会被删除。
ngtable w.r.t 数据的自动宽度。
更新代码
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" class="animate" ng-animate="enter: 'animate-enter', leave: 'animate-leave'">
<td data-title="'Agent Name'" class="text-center" header-class="text-center" filter=" 'host': 'text' " sortable="'host'"> item.host </td>
<td data-title="'Org Id'" class="text-center" header-class="text-center" filter=" 'org': 'text' " sortable="'org'">item.org</td>
<td data-title="'Status'" class="text-center" header-class="text-center" filter=" 'name': 'select' " sortable="'status'" filter-data="filterAgentStatus($column)"><img ng-src=" item.status " /></td>
</tr>
</table>
</body>【问题讨论】：
你说“但是看起来如果选择的项目有空格，那么它就不起作用（过滤器）”。你是什么意思。请记住，在 javascript 中，空间可能具有不同的含义，具体取决于上下文。在布尔表达式中' ' 等于 undefined 等于 false
@cleftheris：在我的示例中，“状态”选择过滤器仅适用于“未安装”，因为它没有空格，但如果我给出“未安装”（这是我需要的），它确实不过滤数据，当我选择“正在运行”时，它也会显示“未运行”。
@cleftheris：过滤器需要完全匹配，因为当前“正在运行”返回“正在运行”和“未运行”。我在匹配其中有空间的项目方面取得了一些进展，并更新了上面的代码
plunker 没有过滤器，对于“精确匹配”问题没有明确的解决方案
【参考方案1】：
需要精确匹配过滤器
ng-table 实际上并没有对数据应用过滤器——它只负责从用户那里收集过滤器值。
在您配置 ng-table 的 getData 函数中，您正在使用 angular $filter 服务来应用过滤器。正是这个服务负责进行实际的过滤。因此，如果你想要一个完全匹配的行为，你需要使用 $filter 以外的东西。
...一旦用户再次选择并单击选择过滤器，就会删除额外的空白条目
更新：我已经编辑了我之前的答案。
我已经用 ng-table 解决了这个特殊问题。以下是关于该问题的对话：https://github.com/esvit/ng-table/pull/654#issuecomment-127095189
修复的提交：1ee441
ngtable w.r.t 数据的自动宽度。
渲染的 html 表格的列宽使用 css 控制。 ng-table 没有添加任何具体内容。您应该创建自己的样式规则来更改宽度。 提示：您还可以在 html 标记中使用 colgroup，并为每个 <col> 标签指定特定宽度
【讨论】：
实际上，$filter 的“过滤器”过滤器的第三个参数可用于使用angular.equals() 进行比较，它应该为您提供您正在寻找的确切匹配。只需将true 传递给第三个参数。【参考方案2】：
如果 Okonomy 说您可以执行以下操作
filter=" 'name': 'select' : true "
<td data-title="'Status'" class="text-center" header-class="text-center" width="40px" filter=" 'name': 'select' : true " sortable="'status'" filter-data="filterAgentStatus($column)"><img ng-src=" item.status " /></td>我发现这不是真的。您需要进入控制该页面的 .js 文件并执行类似以下的操作。
var newStudies = $filter('filter')(controller.TableData, params.filter(), true);但这会强制表中的所有过滤器完全匹配（因此您的表将为空）。所以你必须制作一个自定义过滤器。以下链接中有自定义属性的示例。不是很好的例子，但它是一个例子： custom filter example for ng-table
【讨论】：
【参考方案3】： 为了运行 filterAgentStatus，您必须将“select”更改为“select-multiple”。 （您可能可以覆盖“select-multiple”的默认模板，以便在“select-multiple”处进行单选）：<td data-title="'Status'" class="text-center" header-class="text-center" width="40px" filter=" 'name': 'select-multiple' " sortable="'status'" filter-data="filterAgentStatus($column)"><img ng-src=" item.status " /></td>注意：我认为你最好将 item 传递给 filterAgentStatus，而不是 $column: filterAgentStatus(item)。
【讨论】：
以上是关于如何在 ngtable 中选择过滤器？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Ext JS Grid 3.2 的列标题中添加过滤器选择器