我如何使用搜索栏离子

-1

我想执行的JSON搜索，并在屏幕上显示出来我如何使用搜索栏离子

看看这个plunk我made.Can有人告诉我，我怎么能执行搜索搜索JSON API和在屏幕上显示并使用该数据。

<div class="list list-inset"> 
    <label class="item item-input"> 
    <i class="icon ion-search placeholder-icon"></i> 
    <input type="text" placeholder="Search"> 
    </label> 
</div>

来源

2017-03-08 ilearn

我叉你plunker过滤NG重复here但如果你没有得到它，你需要在你的搜索栏中添加ng-model，所以把这行改为

<input type="text" placeholder="Search" ng-model='query'>

，然后在NG-重复做：

<article ng-repeat="object in yifito | filter : query">

和它的作品，我只是检查（和分支）

来源

2017-03-08 05:46:51 Marko

当我搜索它不显示任何 – ilearn

为如其他一些电影这不是工作：当我搜索蝙蝠侠没有在屏幕上显示 – ilearn

那么，蝙蝠侠在这里存在吗？因为我无法看到。我不明白你在说什么，为什么你会期望它适用于其他电影，即不在列表中的电影？ – Marko

添加NG-模型输入字段和使用功能

<ion-content> 
    <div class="list list-inset"> 
     <label class="item item-input"> 
     <i class="icon ion-search placeholder-icon"></i> 
     <input type="text" placeholder="Search" ng-model="search"> 
     </label> 
    </div> 

    <section class="list"> 
     <article ng-repeat="object in yifito|filter:myfilter "> 
     <a href="{{object.url}}" target="_system" onclick="window.open('{{object.url}}',_system,'location=yes')" class="item"> 
      <img ng-src="{{object.medium_cover_image}}"> 
      <h2 class="noWhiteSpace">{{object.title}}</h2> 
      <p class="noWhiteSpace">{{object.genres}}</p> 
      <p class="noWhiteSpace">Year {{object.year}} Rating {{object.rating}}</p> 
      </div> 
     </a> 
     </article> 
    </section> 
    </ion-content>

Myfilter功能逻辑在js文件

$scope.myfilter = function(obj) { 
    var val = true; 
    if($scope.search && !obj.title || 
     $scope.search && !obj.Rating || 
     $scope.search && !obj.year 
    ) { 
     val = false; 
    } 
     return val; 
    }

来源

2017-03-08 05:16:26 Harish98

我如何使用搜索栏离子

回答

相关问题