如何<h4>仅当过滤结果显示在特定 div 或<td>

Question

下面是我根据搜索输入显示数据$topic和$response的代码。现在我想为每个div 显示一个标题，并且仅在div 中显示时才显示标题。 你能帮忙吗 你可以在下面找到我的示例代码

<div ng-app="sample" ng-controller="sampleController">        
<div class="black">      
<input type="text" name="search" ng-model="search"
placeholder="search" ng-click="didSelectLanguage()"/>          
</div>
<br>
<br>
<br>
<table  style="border: 1px solid black ;">
<tbody>
<tr>
<td><center><b>Question</b></center></td>
<td ><center><b>Response</b></center></td>
</tr>
<tr ng-repeat="user in users | filter:searchFilter">
<h4>Heading 1</h4>
<td style="border: 1px solid black ; width:30%;white-space: pre-wrap;">{{user.gsx$topic.$t}}</td>
<td style="border: 1px solid black ; width:70%;white-space: pre-wrap;">{{user.gsx$response.$t}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
angular.module('sample', []).
controller('sampleController', ['$scope', '$http', function ($scope, $http) {              
var url = "https://spreadsheets.google.com/feeds/list/153Obe1TdWlIPyveZoNxEw53rdrghHsiWU9l-WgGwCrE/1/public/values?alt=json";
// var url2 = "https://spreadsheets.google.com/feeds/list/153Obe1TdWlIPyveZoNxEw53rdrghHsiWU9l-WgGwCrE/2/public/values?alt=json";
$http.get(url)
.success(function(data, status, headers, config) {     
$scope.users = data.feed.entry;
console.log($scope.users);
})
.error(function(error, status, headers, config) {
console.log(status);
console.log("Error occured");
}); 
$scope.search='';
$scope.searchFilter=function(item){
if(item.gsx$topic.$t.indexOf($scope.search) != -1 || item.gsx$response.$t.indexOf($scope.search) != -1){
return true;
}
return false;
}
}]);
</script>

Answer 1

可能的解决方案 1：-

您实际上可以将对过滤结果的引用保存在一个变量中：h in filtered.marvel = (heroes | filter：{comic：'Marvel'}(，您可以像这样使用：filtered.marvel.length。

"英雄找到！"div 只有在长度 ！= 0 时才被添加

<div ng-if="heroes.length != 0"><b>Heroes Found!</b></div>
<div ng-repeat="h in filtered.marvel = (heroes | filter:{comic:'Marvel'})">
{{ h.name}} - {{h.comic}}
</div>

见普伦克

尔