使用离子而不使用离子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-repeat，所以我为两者设置了搜索过滤器。

  

如果有人对第二个快照中提到的搜索活动有所了解，请将您的想法或代码博客分享给我。这对我有帮助。