Geek Answers Handbook

Global search block in angular

I want to implement a search box that changes what it is looking for based on which controller is used. If you are in the "message" mode, he will look for api messages, if you are in the video view mode, he will look for a video api. It seems that in the search box you may need your own controller. I’m sure that I need to implement a search service in all the controllers of the model, but I’m not quite sure how to change the URL that it is looking for, or to associate the input data with different areas of the controller.

So, any ideas on how to have a global search field that changes where it runs, based on which controller uses it, and linking its state to the changing view?

+4
source share
2 answers

To make a resource call a dynamic api, I would first create two $ resources that map to your two endpoints, messages and videos. Then put the ng-change event in your global search, which calls the function in your base controller.

This function must first find out what api to search for. Then make the corresponding api call. The important part is in the callback, and I think this is what you are looking for. In the callback, you can pass broadcast data from your api request. Each of your controllers will listen for an event with the $ on function. Then, the listeners will populate the correct area variable with callback data.

The pseudo is below.

Same html layout with ng-change

<html> <body ng-controller="AppController"> <form> <label>Search</label> <input ng-model="global.search" ng-change="apiSearch()" type="text" class="form-control" /> </form> <div ui-view="posts"> <div ng-controller="PostController"> <p ng-repeat="post in posts | filter: global.search">{{ post.name }}</p> </div> </div> <div ui-view="videos"> <div ng-controller="VideoController"> <p ng-repeat="video in videos | filter: global.search">{{ video.name }}</p> </div> </div> </body> </html>

Appcontroller

 .controller('AppController', function ($scope, PostService, VideoService) { $scope.apiSearch = function() { // Determine what service to use. Could look at the current url. Could set value on scope // every time a controller is hit to know what your current controller is. If you need // help with this part let me know. var service = VideoService, eventName = 'video'; if ($rootScope.currentController == 'PostController') { service = PostService; eventName = 'post'; } // Make call to service, service is either PostService or VideoService, based on your logic above. // This is pseudo, i dont know what your call needs to look like. service.query({query: $scope.global.search}, function(resp) { // this is the callback you need to $broadcast the data to the child controllers $scope.$broadcast(eventName, resp); }); } })

Each of your child controllers that display the results.

 .controller('PostController', function($scope) { // anytime an event is broadcasted with "post" as the key, $scope.posts will be populated with the // callback response from your search api. $scope.$on('post', function(event, data) { $scope.posts = data; }); }) .controller('VideoController', function($scope) { $scope.$on('video', function(event, data) { $scope.videos = data; }); })
+8
source

Client side filtering.

If you are not looking for anything crazy that can be achieved in a super easy way for a global search. I did not even know if this would work, so I just did a quick check, and it is. Obviously, this could be solved in a much more detailed and controlled way, using services and implementing them where they are needed. But since I don’t know what you are looking for, I will provide this solution, if you like it, agree to this. If you do not, then I can probably help you with the injection solution in the service

A quick fix is ​​to have a widescreen application controller with $ rootScope ng-model. Let's call it global.search.

  $rootScope.global = { search: '' };

For advanced in-app search.

 <form> <label>Search</label> <input ng-model="global.search" type="text" class="form-control" /> </form>

In separate elementary parts, you just need to filter data based on global.search ng-model. Two examples

 <p ng-repeat="post in posts | filter: global.search">{{ post.name }}</p>

The second template with a different area

 <p ng-repeat="video in videos | filter: global.search">{{ video.name }}</p>

Notice how they implement | filter: global.search. Whenever global.search changes, any filters in the current view will be changed. Thus, messages will be filtered by viewing messages and videos in the form of video viewing. When using the same global model global.search ng.

I tested this, it works. If you need to explain the hierarchy of the installation and the child controller in more detail, let me know. Here is a quick overview of the complete template.

 <html> <body ng-controller="AppController"> <form> <label>Search</label> <input ng-model="global.search" type="text" class="form-control" /> </form> <div ui-view="posts"> <div ng-controller="PostController"> <p ng-repeat="post in posts | filter: global.search">{{ post.name }}</p> </div> </div> <div ui-view="videos"> <div ng-controller="VideoController"> <p ng-repeat="video in videos | filter: global.search">{{ video.name }}</p> </div> </div> </body> </html>
+3
source

More articles:


All Articles