Question

我想在select中设置一个ngtable过滤器。我跟着this example但看起来如果select项有空格（例如：Not Installed或Not Running），则它不起作用（过滤器）。我正在寻求plunker求助。

我需要帮助的几件事

~~选择不适用于选择项目中的空格。~~
需要精确的过滤匹配。例如：Running select应该只显示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>

Answer 1

如果Okonomy说您可以执行以下操作

filter="{ 'name': 'select' : true }"

＆＃13;

<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>

＆＃13;

我没有发现这是真的。您需要进入控制该页面的.js文件，并执行更类似于下面的操作。

＆＃13;

var newStudies = $filter('filter')(controller.TableData, params.filter(), true);

＆＃13;

但这会强制表中的所有过滤器完全匹配（因此您的表将为空）。所以你必须制作一个自定义过滤器。以下链接中有自定义属性的示例。不是很好的例子，但它是一个例子： custom filter example for ng-table

Answer 2

为了运行filterAgentStatus，您必须将“select”更改为“select-multiple”。（您可以覆盖'select-multiple'的默认模板，以便在'select-multiple'中进行单一选择）：

for (i in arr) {
  $('ul#nav').append('<li><a href="#' + arr[i] + '">' + arr[i] + '</a></li>');
}

注意：我认为你最好将item传递给filterAgentStatus，而不是$ column：filterAgentStatus（item）。

如何在ngtable中选择过滤器？

2 个答案: