当用户搜索中不存在子元素时如何隐藏组标题 [英] How to hide group heading when child elements not present on user search
问题描述
我们为对象添加了角度搜索功能.但是，如果相应组中不存在与搜索关键字匹配的主题，则我想隐藏主题类别.例如:当用户搜索"Ma"关键字时，我们应该隐藏体育与艺术"类别.请参考代码链接-代码 http://plnkr.co/edit/V9X1e7QeZaELMNkh4Ucd?p=preview 帮助表示赞赏.
We added angular search feature for subjects. But I would like to hide subjects category if search keyword matching subjects are not present in respective group. Eg: We should hide "Sports & Arts" category when user searched for "Ma" keyword. Please refer plunker link for code - http://plnkr.co/edit/V9X1e7QeZaELMNkh4Ucd?p=preview Help appreciated.
<div class="search">
<label for="subjectSearch">Search: </label>
<input type="text" name="search" placeholder="Type here to search" class="form-control search-input" ng-model="searchText"/>
</div>
<div class="content-wrapper">
<div ng-repeat="subjects in groupsList track by $index">
<p class="category" style="background:#ddd;font-weight:bold">{{subjects.subjectHeading}}</p>
<p class="subject-list" ng-repeat="subject in subjects.subjects | filter:searchText">
<label for="{{subject}}">
<input ng-model="selectedGroups[$parent.$index].subCategory[$index]" type="checkbox" id="{{subject}}" name="{{subject}}" data-name="{{subject}}" class="subject" ng-true-value="'{{subject}}'" ng-init="checked=''" ng-false-value="''">{{subject}}
</label>
</p>
</div>
</div>
角度代码
var employeeApp = angular.module("EmployeeApp",[]);
employeeApp.controller("empCtrl",function($scope){
$scope.query = {}
$scope.queryBy = '$'
$scope.groupsList = [
{
"subjectHeading":"Academic",
"subjects": [
"Maths",
"Computer science"
]
},
{
"subjectHeading":"Sports & Arts",
"subjects":[
"Tennis",
"FootBall",
"Dance"
]
}
];
});
推荐答案
使用ng-if with filter显示/隐藏SubjectHeading.
Use ng-if with filter to show/Hide SubjectHeading.
喜欢
<p class="category" ng-if="subjects.subjects | filter : searchText" style="background:#ddd;font-weight:bold">{{subjects.subjectHeading}}</p>
OR
您可以使用$filter过滤记录并仅显示过滤的信息.
You can use $filter to filter the records and display filtered information only.
HTML
<body ng-controller="empCtrl">
<div class="search">
<label for="subjectSearch">Search: </label>
<input type="text" name="search" placeholder="Type here to search" class="form-control search-input" ng-model="searchText" ng-change="change(searchText)"/>
</div>
<div class="content-wrapper">
<div ng-repeat="subjects in mirrorGroupList track by $index">
<p class="category" style="background:#ddd;font-weight:bold">{{subjects.subjectHeading}}</p>
<p class="subject-list" ng-repeat="subject in subjects.subjects">
<label for="{{subject}}">
<input ng-model="selectedGroups[$parent.$index].subCategory[$index]" type="checkbox" id="{{subject}}" name="{{subject}}" data-name="{{subject}}" class="subject" ng-true-value="'{{subject}}'" ng-init="checked=''" ng-false-value="''">{{subject}}
</label>
</p>
</div>
</div>
</body>
ngController
var employeeApp = angular.module("EmployeeApp",[]);
employeeApp.controller("empCtrl",function($scope,$filter){
$scope.query = {}
$scope.queryBy = '$'
$scope.groupsList = [
{
"subjectHeading":"Academic",
"subjects": [
"Maths",
"Computer science"
]
},
{
"subjectHeading":"Sports & Arts",
"subjects":[
"Tennis",
"FootBall",
"Dance"
]
}
];
// create mirror copy for filtering information
$scope.mirrorGroupList = angular.copy($scope.groupsList);
$scope.change = function(data){
$scope.mirrorGroupList = $filter('filter')($scope.groupsList,{$ : data});
}
});
注意:在这里，我创建了groupsList的镜像副本，并将过滤后的值传递给镜像副本，并且每次searchText更改时，我都基于原始的 $ scope.groupsList 数组对信息进行过滤，因此原始信息始终保持原样.
Note : Here, I am created mirror copy of groupsList and passing filtered value to mirror copy and each time when searchText is change, I am filtering information based on original $scope.groupsList array, so the original information remain always as it is.
要仅搜索特定键，则ypu必须用其他键替换$
像
To search on specific key only then ypu have to replace $ with other key
Like
$scope.change = function(data){
// replaced `$` with subjects
$scope.mirrorGroupList = $filter('filter')($scope.groupsList,{subjects : data});
}
这篇关于当用户搜索中不存在子元素时如何隐藏组标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
