使用不使用离子的离子创建离子搜索栏2

Question

我使用下面的编码创建了应用程序，我想按照下面的图像使用离子搜索栏来处理列表视图。是否有可能，如果是这样，建议我一些想法或代码博客这将有助于我。

注意：根据以下代码，搜索功能运行良好，但是如果搜索发生了，它将显示带匹配列表的文本，甚至与空白单元格不匹配的列表。所以我想处理像下面提到的第二次捕捉的搜索。

sample.html

<ion-view view-title="Call Lists"> 
<ion-content class="customListView" has-header="true"> 

<div class="bar bar-header item-input-inset"> 
<input type="search" placeholder=" Search" ng-model="searchValue" 
style="width:100%; padding-left:11px;" /> 
</div> 

<ion-list> 

<ion-item class="item item-avatar item-icon-right" ng-repeat="item in callItems.objects" ng-click="doTask()" can-swipe="true"> 

<ion-option-button class="button-positive" 
ng-click="doEdit()"> 
<i class="ion-more"></i> 
</ion-option-button> 

<img src="img/men.png"> 
<i class="icon ion-ios-arrow-right"></i> 

<div ng-repeat="(key, value) in item.Fields | filter:searchValue"> 

<h3> {{value.Value}}</h3> 

</div> 

</ion-item> 

</ion-list> 

</ion-content> 
</ion-view> 

输出：

我想要做的象下面这样：

Answer 1

同时加入了以下行空单元格的问题得到了解决。

<ion-item class="item item-avatar item-icon-right" ng-repeat="item in callItems.objects | filter:searchValue" ng-click="doTask()" can-swipe="true"> 

而不是

<ion-item class="item item-avatar item-icon-right" ng-repeat="item in callItems.objects " ng-click="doTask()" can-swipe="true"> 

的事情是，我给出了两个NG-重复按我的情况，所以我设置两个搜索过滤器。

如果任何人有关于第二次快照中提到的搜索活动的想法，请将您的想法或代码分享给我博客这对我很有帮助。