javascript - Search AngularJS resource using query string -

i have following resource set in angularjs app:

var phonecatservices = angular.module('phonecatservices', ['ngresource']);  phonecatservices.factory('phone', ['$resource',   function($resource){     return $resource('phones/:phoneid.json', {}, {       query: {method:'get', params:{phoneid:'phones'}, isarray:true}     });   }]); 

and default listed via controller:

var phonecatcontrollers = angular.module('phonecatcontrollers', []);  phonecatcontrollers.controller('phonelistctrl', ['$scope', 'phone',   function($scope, phone) {     $scope.phones = phone.query();     $scope.orderprop = 'age';   }]); 

as can see have filter want query string based search can use history results after choosing record, etc.

first question have here, list uses phones.json data don't specify anywhere in code... how work? presume magic happening can't see it.

so initial question, have built following search controller:

phonecatcontrollers.controller('searchctrl', ['$scope', '$http', '$location', 'phone',     function ($scope, $http, $location, phone) {         $scope.keywords = $location.search()['q'];         // function executed on button click (ng-click="search()")         $scope.search = function() {                 $location.path('phones').search('q', $scope.keywords);              $scope.phones= phone.query($scope.keywords);          }     }]); 

so should use query string find results. how do this? seems transparent how data pulled json file. method should list data if query string there on page load... perhaps should combined 1 controller both list , search?

the code above doesn't filter json data when search... query string isn't being used... presume it's because don't understand how app knows in 'phones.json' file?

---

the html filtering , search:

<div class="control-group">     <label class="control-label">filter:</label>     <div class="controls">         <input ng-model="$parent.query">     </div> </div> <div class="control-group">     <label class="control-label">sort by:</label>     <div class="controls">         <select ng-model="$parent.orderprop">             <option value="name">alphabetical</option>             <option value="age">newest</option>         </select>     </div> </div>  <hr/>  <div ng-controller="searchctrl">     <form class="form-search" ng-submit="search()">         <label>search:</label>         <input type="text" name="q" ng-model="keywords" class="input-medium search-query" placeholder="keywords...">         <button type="submit" class="btn" ng-click="search()">search</button>     </form> </div> 

the html list:

<ul class="phones">     <li ng-repeat="phone in phones | filter:query | orderby:orderprop"     class="thumbnail phone-listing">         <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageurl}}"></a>         <a href="#/phones/{{phone.id}}">{{phone.name}}</a>         <p>{{phone.snippet}}</p>     </li> </ul> 

ok ensure understand correctly:

• you have as-you-type search using angular's filter filter
• this search implemented using input bound variable named query
• you trying persist search terms when changing view , coming back
• you want persist in url

you don't need new controller or new input. in phonelistctrl controller, add $scope.query = $location.search().q. read q parameter url , write value in query, automatically fill input , filter results.

to reverse (ie writing value of query url), add ng-change attribute input (<input ng-model="query" ng-change="querychanged()"/>), , add corresponding function controller:

$scope.querychanged = function () {     $location.search('q', $scope.query) } 

this function executed every time query changes , update url accordingly. should work out now. see fiddle.

as side note, persisting query in url might not best idea, remain visible user's browser after have left search view. use session storage, example.