Corner Search Models

Question

I am new to angularJS. I have a requirement to search on JSON data. Here is an example JSON structure

countries = [ { "country_name" : "India", "stations" : [ { "name": "Dream Factory" } ] }, { "country_name" : "Indonesia", "stations" : [ { "name": "Drummer Factory" }, { "name": "Beats" } ] } ] 

Let's say I type Ind , I need countries that match the string, and return both India and Indonesia Also in the other field, enter Factory to get the names of the stations that match the string (here Drummer Factory , Dream Factory ).

What is an easy way to achieve this? Is there a built-in directive that allows this or can I use filters. If so, send an example using ...

Answer 1

You can use a filter called 'filter' (yes, this is a bit confusing): http://docs.angularjs.org/api/ng.filter:filter

Here is a demo: http://jsfiddle.net/g/pXnRs/4/

HTML:

 <div ng-controller="CountryController"> Filter: <input ng-model="nameFilter" /> <ul> <li ng-repeat="country in countries | filter: nameFilter"> {{country | json}} </li> </ul> </div>​ 

JS:

 var app = angular.module('app', []); app.controller('CountryController', function($scope){ $scope.nameFilter = ''; $scope.countries = [ { "country_name" : "India", "stations" : [ { "name": "Dream Factory" } ] }, { "country_name" : "Indonesia", "stations" : [ { "name": "Drummer Factory" }, { "name": "Beats" } ] }]; }); angular.bootstrap(document, ['app']); 

If you need stations only as results, you must first smooth the hierarchy of JSON objects into a list of stations.