【发布时间】：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" 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 中，空间可能具有不同的含义，具体取决于上下文。在布尔表达式中
' '等于undefined等于false -
@cleftheris：在我的示例中，“状态”选择过滤器仅适用于“未安装”，因为它没有空格，但如果我给出“未安装”（这是我需要的），它确实不过滤数据，当我选择“正在运行”时，它也会显示“未运行”。
-
@cleftheris：过滤器需要完全匹配，因为当前“正在运行”返回“正在运行”和“未运行”。我在匹配其中有空间的项目方面取得了一些进展，并更新了上面的代码
-
plunker 没有过滤器，对于“精确匹配”问题没有明确的解决方案
标签： javascript css angularjs ngtable