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
Post a Comment