-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