Question

我想在json上执行搜索并在屏幕上显示

查看我制作的plunk。有人告诉我如何在屏幕上执行搜索和显示并使用该数据。

user    data
1       apples
2       oranges
3       bananas
1       passion fruit
2       pineapples
3       peaches
1       melon
2       plums
3       pears

Answer 1

将ng-model添加到输入字段并使用函数

过滤ng-repeat

 <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>

js文件中的Myfilter函数逻辑

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

Answer 2

我分叉你的plunker here但是如果你没有得到它，你需要在搜索栏中添加ng-model，所以将这一行改为

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

然后在你的ng-repeat中执行：

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

它有效，我只是检查（和分叉）

如何使用离子搜索栏搜索JSON API

2 个答案: