-1
我想在ngtable有一个select筛选器。我遵循this example，但看起来像选择的项目是否有空间（例如：Not Installed或Not Running），那么它不起作用（过滤器）。我正在建立一个plunker寻求帮助。如何让选择过滤器在ngtable？
有几件事情我需要
-
帮助选择不与选择的项目空间工作。 - 需要精确的过滤器匹配。例如：
Running选择应只显示Running而不是Not Running。 - 也在ngtable example当用户点击选择时，它会给出一个额外的空白条目，一旦用户选择并再次单击选择过滤器，该条目将被删除。
- ngtable w.r.t的自动宽度是数据。
更新代码
\t var app = angular.module('main', ['ngTable'])
\t .controller('DemoCtrl', function($scope, $filter, ngTableParams, $log) {
\t \t $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"}];
\t \t
\t \t $scope.tableParams = new ngTableParams({
\t \t \t page: 1, // show first page
\t \t \t count: 10 // count per page
\t \t }, {
\t \t \t total: $scope.tableData.length, // length of data
\t \t \t getData: function($defer, params) {
\t \t \t \t var filterData = params.filter() ? $filter('filter')($scope.tableData, params.filter()) : $scope.tableData;
\t \t \t \t var orderedData = params.sorting() ? $filter('orderBy')(filterData, params.orderBy()) : filterData;
\t \t \t \t var table_data = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
\t \t \t \t params.total(orderedData.length);
\t \t \t \t $defer.resolve(table_data);
\t \t \t }
\t \t });
\t \t
\t \t //Took help from http://ng-table.com/#/demo/3-2
\t \t /*var inArray = Array.prototype.indexOf ?
\t \t \t function(val, arr) {
\t \t \t \t var temp = arr.indexOf(val);
\t \t \t \t return temp;
\t \t \t } :
\t \t \t function(val, arr) {
\t \t \t \t var i = arr.length;
\t \t \t \t while (i--) {
\t \t \t \t \t if (arr[i] === val) return i;
\t \t \t \t }
\t \t \t \t return -1
\t \t \t };*/
\t \t $scope.filterAgentStatus = function(column) {
\t \t \t var def = $q.defer(),
\t \t \t \t arr = [],
\t \t \t \t filterAgentStatus = [];
\t \t \t angular.forEach($scope.tableData, function(item) {
\t \t \t \t //if (inArray(item.name, arr) === -1) {
\t \t \t \t \t //arr.push(item.name);
if (jQuery.inArray(item.selectId, arr) === -1) {
arr.push(item.selectId);
\t \t \t \t \t filterAgentStatus.push({
\t \t \t \t \t \t 'id': item.selectId,
\t \t \t \t \t \t 'title': item.name
\t \t \t \t \t });
\t \t \t \t }
\t \t \t });
\t \t \t def.resolve(filterAgentStatus);
\t \t \t return def;
\t \t };
\t });<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>
你说“但看起来像是如果选择的项目有一个空间，那么它不起作用（过滤器）”。你是什么意思。请记住，在JavaScript空间可以有不同的含义取决于上下文。在一个布尔表达式中'''''equals''undefined''等于'false' – cleftheris
@cleftheris：在我的例子“status”中，select过滤器只适用于“NotInstalled”，因为它没有空格，但是如果我给“Not Installed”这是我需要的），它不会过滤数据，当我选择“运行”时它也会显示“NotRunning”。 – Ricky
@cleftheris：需要完全匹配过滤器，因为当前“Running”会返回“Running”和“Not Running”。我在匹配其中有空间的项目方面取得了一些进展，并更新了我的代码 – Ricky