使用不使用離子的離子創建離子搜索欄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-重複按我的情況，所以我設置兩個搜索過濾器。

如果任何人有關於第二次快照中提到的搜索活動的想法，請將您的想法或代碼分享給我博客這對我很有幫助。