通过保留搜索项目的唯一组并在 ng-repeat 中隐藏其他组来进行搜索

Question

我根据部门组创建了ng-repeat，想要使用搜索过滤器，但在搜索项目时，应该通过隐藏其他项目和其他组来仅显示该搜索项目的组。现在在其组下正确显示搜索的项目，并隐藏其他项目但不隐藏其他组名称。

$scope.users=[
{
"Name":"AA",
"Age":20,
"Department":"Sales",
"Sal":4000
},
{
"Name":"BB",
"Age":25,
"Department":"Accounts",
"Sal":6320
},
{
"Name":"CC",
"Age":34,
"Department":"Sales",
"Sal":8500
},
{
"Name":"DD",
"Age":32,
"Department":"Accounts",
"Sal":3500
},
{
"Name":"EE",
"Age":25,
"Department":"Sales",
"Sal":4900
},
{
"Name":"FF",
"Age":30,
"Department":"Production",
"Sal":4520
}
];
$scope.workers=[
{
"Name":"alpha",
"Age":90,
"Department":"XYX",
"Sal":9999
},
{
"Name":"BETA",
"Age":80,
"Department":"ABC",
"Sal":88888
}];
 $scope.workers=angular.fromJson(jsonData2);
});

<input type="text" ng-model="searchOn" ">
<br>
<div ng-repeat="(key, value) in users | groupBy: 'Department' ">
  <div>
    <p>{{ key }}</p>
  </div>
 
  <div ng-repeat="usr in value | filter: searchOn ">
    <div>
      <p>Name: {{usr.Name}} Age: {{usr.Age}}</p>
    </div>
</div>
</div>
<div ng-repeat="(key, value) in workers | groupBy: 'Department' ">
  <div>
    <p>{{ key }}</p>
  </div>
 
  <div ng-repeat="wrk in value | filter: searchOn ">
    <div>
      <p>Name: {{wrk.Name}} Age: {{wrk.Age}}</p>
    </div>
</div>
</div>
the below is the $scope.users
Name	Age	Department	Sal
AA	20	Sales		4000
BB	25	Accounts	6320
CC	34	Sales		8500
DD	32	Accounts	3500
EE	25	Sales		4900
FF	30	Production	4520
and the end result I want something like below
Department
	
	Sales:		AA	20	Sales		4000
		      	CC	34	Sales		8500
		      	EE	25	Sales		4900
	Accounts:	BB	25	Accounts	6320
			     DD	32	Accounts	3500
	Production:	FF	30	Production	4520

Answer 1

您必须使用临时变量来存储过滤users。喜欢：

ng-repeat="usr in filteredArray = (value | filter: searchOn)"

并将过滤器数据的长度绑定到ng-if . 如：

 <p ng-if="filteredArray.length > 0" ng-bind="key"></p>

看到这个工作小提琴

更新

了更新问题的提琴链接。