如何在ngtable中选择过滤器？

Question

我想在select有一个ngtable过滤器。我跟着this example，但看起来如果选择项目有空格（例如：Not Installed或Not Running），那么它不起作用（过滤器）。我正在建立一个plunker寻求帮助。

有几件事我需要帮助

选择不适用于选择项目中的空格。
需要精确的过滤匹配。例如：Running选择应该只显示Running而不是Not Running。
同样在ngtable example中，当用户点击选择时，它会提供一个额外的空白条目，一旦用户选择并再次单击选择过滤器，该条目就会被删除。
自动宽度可以使用它的数据。

更新的代码

	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>

Screenshot Below enter image description here

Answer 1

需要精确的过滤匹配

ng-table实际上并不对数据应用过滤器 - 它只负责从用户收集过滤器值。

在您配置ng-table的getData函数中，您正在使用角度$ filter服务来应用过滤器。这项服务负责进行实际过滤。因此，如果您想要完全匹配行为，则需要使用$ filter之外的其他内容。

...额外的空白条目，一旦用户选择并再次单击选择过滤器，该条目将被删除

更新：我已经编辑了我以前的答案。

我用ng-table修复了这个特殊问题。这是关于这个问题的对话：https://github.com/esvit/ng-table/pull/654#issuecomment-127095189

提交修复：1ee441

自动宽度可以使用它的数据。

使用css控制渲染的html表的列宽。 ng-table没有添加任何具体内容。您应该创建自己的样式规则来更改宽度。提示：您还可以在html标记中使用colgroup并为每个<col>标记指定特定宽度

Answer 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

Answer 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中选择过滤器？

问题描述投票：0回答：3

3个回答

最新问题

如何在ngtable中选择过滤器？

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3