javascript - Make AngularJS page double as search results page -


i have basic table in i'm displaying data, pulled database, through angularjs. have search field uses angularjs filter data:

<input ng-model="search" id="search" type="text" placeholder="search" value=""> <div ng-controller="eventscontroller")>     <table>         <tr ng-repeat="event in events | filter:search">             <td><span ng-bind="event.title"></span></td>             <td><span ng-bind="event.date_start"></span></td>         </tr>     </table> </div> <script>     function eventscontroller($scope, $http) {         $http.get('/api/all-events').success(function(events) {             $scope.events = events;         });     } </script> 

this great user-defined searches, if want run particular filter upon page load while maintaining search functionality? there way can use angularjs automatically filter results based on url parameter (i.e. example.com?search=foo)? ideally, value of the input field set url parameter.

like comments said, has nothing filter. it's more how organize code customize url path send server. can try way:

function eventscontroller($scope, $http) {     // field bound ng-model="search" in html      $scope.search = 'all';      $scope.fetchresults = function() {         var path;         if ($scope.search === 'all') {             path = '/api/all-events';         } else {             path = '/search?input=' + $scope.search;         }          // here send different url path         // depending on condition of $scope.search         $http.get(path).success(function(events) {             $scope.events = events;         });     };      // line called once when controller initialized     $scope.fetchresults(); } 

and html code, make sure controller on parent div of input field , search button. , search button, invoke fetchresults() when it's clicked:

<div ng-controller="eventscontroller")>     <input ng-model="search" id="search" type="text" placeholder="search" value="">     <button ng-click="fetchresults()">search</button>     <div>         <table>             <tr ng-repeat="event in events | filter:search">                 <td><span ng-bind="event.title"></span></td>                 <td><span ng-bind="event.date_start"></span></td>             </tr>         </table>     </div> </div> 

Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -