如何有选择滤波器ngtable？ [英] How to have select filter in ngtable?

问题描述

我想有一个中的过滤器=htt​​p://ng-table.com/#/相对=nofollow> ngtable 。我跟着这个例子不过貌似如果选择项目有一个空格（如： 未安装或未运行），那么它不工作（过滤器）。我把一个 plunker 寻求帮助。

有几件事我需要帮助

1. <击>选择不与选择的项目空间合作。


2. 需要精确匹配的过滤器。例如：运行选择只显示运行，而不是未运行。


3. 此外，在 ngtable例如的，当用户点击选择它提供了一个额外的空白条目这是一次用户选择删除，再次单击选择过滤器。


4. w.r.t它的数据ngtable自动宽度。

更新code

\r

\r

VAR应用= angular.module（'主'，['ngTable']）\r
.controller（'DemoCtrl'，函数（$范围，$过滤器，ngTableParams，$日志）{\r
$ 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\"}];\r
\r
$ scope.tableParams =新ngTableParams（{\r
页面：1，//显示第一页\r
数：10 //每页计\r
}，{\r
总：数据$ scope.tableData.length，//长度\r
的getData：函数（$延迟，则params）{\r
VAR筛选数据= params.filter（）？ $过滤器（'过滤器'）（$ scope.tableData，params.filter（））：$ scope.tableData;\r
VAR orderedData = params.sorting（）？ $过滤器（'排序依据'）（筛选数据，params.orderBy（））：筛选数据;\r
变种TABLE_DATA = orderedData.slice（（params.page（） - 1）* params.count（），params.page（）* params.count（））;\r
params.total（orderedData.length）;\r
$ defer.resolve（TABLE_DATA）;\r
}\r
}）;\r
\r
//拿了帮助下http://ng-table.com/#/demo/3-2\r
/ * VAR inArray = Array.prototype.indexOf？\r
功能（VAL，编曲）{\r
变种临时= arr.indexOf（VAL）;\r
返回温度;\r
}：\r
功能（VAL，编曲）{\r
VAR I = arr.length;\r
\t\t\t\t当我 - ） {\r
如果（ARR [I] === VAL）回报我;\r
}\r
返回-1\r
}; * /\r
$ scope.filterAgentStatus =功能（列）{\r
变种高清= $ q.defer（），\r
ARR = []，\r
filterAgentStatus = [];\r
angular.forEach（$ scope.tableData，功能（项目）{\r
//如果（inArray（item.name，ARR）=== -1）{\r
//arr.push(item.name）;\r
                如果（jQuery.inArray（item.selectId，ARR）=== -1）{\r
                    arr.push（item.selectId）;\r
filterAgentStatus.push（{\r
'ID'：item.selectId，\r
标题：item.name\r
}）;\r
}\r
}）;\r
def.resolve（filterAgentStatus）;\r
返回DEF;\r
};\r
}）;

\r

＆LT;链接HREF =htt​​ps://cdnjs.cloudflare.com/ajax /libs/ng-table/0.3.3/ng-table.min.css的rel =stylesheet属性/＆GT;\r
＆LT;链接HREF =htt​​ps://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css的rel =stylesheet属性/＆GT;\r
＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =htt​​ps://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js＆GT;＆下; /脚本＆GT;\r
\r
＆LT;机身NG-应用=主NG控制器=DemoCtrl＆GT;\r
\r
  ＆LT;表NG表=tableParams显示过滤器=真正的类=表agentStatusTable文本中心＆GT;\r
\r
＆LT; TR NG重复=项目在$数据HEIGHT =10px的阶级=动画NG-动画={输入：动画进入'，离开：动画休假'}＆GT;\r
  ＆LT; TD数据标题='代理机构名称'级=TEXT-中心头级=TEXT-中心WIDTH =60像素过滤器={'主机'：'文字'}排序= '主机'＆GT; {{item.host}}＆LT; / TD＆GT;\r
  ＆LT; TD数据标题='组织标识'级=TEXT-中心头级=TEXT-中心WIDTH =40像素过滤器={'组织'：'文字'}排序= '组织'＆GT; {{item.org}}＆LT; / TD＆GT;\r
  ＆LT; TD数据标题=状态阶级=TEXT-中心头级=TEXT-中心WIDTH =40像素过滤器={'名'：'选择'}排序='状态'过滤数据=filterAgentStatus（$列）＆GT;＆LT; IMG NG-SRC ={{item.status}}/＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
  ＆LT; /表＆gt;\r
\r
＆LT; /身体GT;

\r

\r

\r下面的截图

解决方案

  <醇开始=2>
  

需要精确匹配的过滤器

  

NG-表实际上并不适用于过滤器中的数据 - 这只是从用户收集过滤器值负责。

在你的的getData 函数你已经配置了，你正在使用的角度$过滤服务应用过滤器NG-表。正是这种服务，是负责做实际的过滤。因此，如果你想完全匹配的行为，您将需要使用其他的东西比$过滤器。

  <醇开始=3>
  

...这是一次用户选择删除，再次单击选择过滤多余的空白项

  

更新：我已经编辑我的previous答案

我已经固定NG表这一具体问题。这里有一个关于这个问题的对话： https://github.com/esvit/ NG-表/拉/ 654＃issuecomment-127095189

该提交的修正： 1ee441

  <醇开始=4>
  

w.r.t它的数据ngtable自动宽度。

  

为渲染HTML表格列宽用css来控制。 NG-表不添加任何具体的。您应该创建自己的风格规则改变宽度。 提示：您还可以使用 COLGROUP HTML标记，并指定一个特定的宽度每个＆LT;山坳＆GT; 标签

I am trying to have a select filter in ngtable. I followed this example but looks like if the select item has a space (eg: Not Installed or Not Running), then it does not work (filter). I am putting up a plunker for help.

There are couple of things I need help with

1. Select does not work with space in the select item.
2. Need exact filter match. Eg: Running select should only show Running and not Not Running.
3. Also in ngtable example when user clicks on the select it gives an extra blank entry which is removed once user selects and clicks the select filter again.
4. Auto width of ngtable w.r.t it's data.

Updated code

	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

解决方案

2. Need exact filter match

ng-table doesn't actually apply the filters the data - it's only responsible for collecting the filter values from the user.

In your getData function you've configured ng-table with, you are using the angular $filter service to apply the filter. It's this service that is responsible for doing the actual filtering. Therefore if you want an exact match behaviour you will need to use something other than $filter.

3. ...extra blank entry which is removed once user selects and clicks the select filter again

UPDATE: I have edited my previous answer.

I've fixed this particular issue with ng-table. Here's a conversation about the problem: https://github.com/esvit/ng-table/pull/654#issuecomment-127095189

The commit for the fix: 1ee441

4. Auto width of ngtable w.r.t it's data.

Column widths for the rendered html table are controlled using css. ng-table does not add anything specific. You should create your own style rules to change the widths. Tip: you can also use colgroup in the html markup and assign a specific width to each <col> tag

这篇关于如何有选择滤波器ngtable？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！