我如何使用搜索欄離子

-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

我如何使用搜索欄離子

回答

相關問題