how can i search a JSON API using search bar in ionic - angularjs

Question

I want to perform a search on json and display it on screen
Check out this plunk i made.Can someone tell me how can i perform a search and display on screen and use that data .
<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>

Answer 1

I forked your plunker here but in case you don't get it you need to add ng-model in your search bar so change this line to
<input type="text" placeholder="Search" ng-model='query'>
And then in your ng-repeat do:
<article ng-repeat="object in yifito | filter : query">
And it works, I just checked (and forked)

Answer 2

Add ng-model to the input field and filter the ng-repeat using the function
<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 function logic in js file
$scope.myfilter = function(obj) {
var val = true;
if($scope.search && !obj.title ||
$scope.search && !obj.Rating ||
$scope.search && !obj.year
) {
val = false;
}
return val;
}