How can I have an index page accept search input and then return the result in different page (view) with angularjs?
All the tutorials I have gone through on the internet shows search box that accepts the query and instantly prints results beneath it on the same page (or say "view" in MVC language?). I want a separate page to just hold the search box, let user type what it wants and then hit go button which then return results on a separate page (which does not have the search box).
You need to store the search box value somewhere before going to the second page. You can do this in several ways.
One way would be to use a service to store the value, then the result page can retrieve it from there.
The service:
.service('CommonService', function(){
this.value = '';
});
The search controller:
.controller('search', function(CommonService){
$scope.goToResult = function(searchBoxValue){
CommonService.value = searchBoxValue;
// Redirect to result view
};
});
This function could be on the ng-submit of the search form.
The result controller:
.controller('result', function(CommonService){
// Receive value of search box
$scope.receivedValue = CommonService.value;
});
Another way would be to send the value along the URL, like GET params:
http://google.com/q?SearchBoxValue=something-i-wrote-before
are you implementing single page application (SPA)? you can do this multiple way with partial view and override partial view on search page with result page.
search page (partial) hit send request to get data.
receive data from service
redirect to result (partial view).
you done.
hope this help you.
Related
In my angular app, there are two pages (list & checkout). In the list page the user could search for an item and the searched item will be displayed and then the user can select the item and continue to checkout.
From the checkout page the user could return back to list page, and at that time all the items in the list page should be same as how it was left before.
For implementing this feature, my code is
on moving from list page to checkout page, all the scope data are stored in a service
returnsService.setScopeData($scope);
And on returning back from checkout page to list page, this saved data are retrieved from service and assigned to scope variables.
var restoreScopeData = returnsService.getScopeData();
if (restoreScopeData) {
for (var key in restoreScopeData) {
if (key.charAt(0) != '$') {
$scope[key] = restoreScopeData[key];
}
}
}
This works fine to an extend, and I can see the list page same as how I left it.
But the problem is, now I'm not able to search for new item in the list page.
When ever a search happens, the items are populated to $scope.listSearch and they are displayed in html {{listSearch}}.
In the error case also,
I can see the new search data getting assigned to the $scope.listSearch, but the HTML binding is not happening.
I tried calling $scope.$apply() after the search assigning, but still not working.
Storing complete scope isn't good idea. You can just store the vars you need. Also, you can use localStorage for this.
As I understood, making new call is not an option, so you can try use $timeout.
$timeout(function() {
$scope.listSearch = myValue;
});
Instead of doing this, you may for localStorage or sessionStorage as suggsted by John.
You may check below link for example
https://www.codeproject.com/Articles/1015515/Working-With-Client-Side-Local-Storage
Trying to figure out how to pass a value in service from one direction to another? I'm building a small search app using Elasticsearch and AngularJS. It has 2 pages, home and results. On home, only functionality is autocomplete (using AngularJS UI Bootstrap Typeahead), on results page, display results and search box. I'm trying to use a custom directive to do this.
I basically have everything working EXCEPT, that when on the homepage, pressing the search button just goes to the results page, no search processing is done. AND everything works on the results page, autocomplete and search functions...
I recently put the ng-model(searchTerms) into its own service, but I DI that service into both my controllers. The only thing I can think of is that somehow my ng-model ISN'T getting passed to the directive? I'm stumped... still learning AngularJS directives.
Basically all the service does for searchTerms is
this.searchTerms = null;
Any ideas?
UPDATE I'm on v1.47 and using ngRoute for now.
UPDATE 2 I have 2 way data binding working now. So when a query is submitted on the home page, the searchTerms variable now displays on the results page. However, there is still no results being displayed and no processing being performed. So just 2 way data binding is working.
UPDATE 3
'use strict';
angular.module('searchengine.query-service', [])
.service('queryService', function() {
var searchTerms;
this.searchTerms = null;
});
You can consider these 2 pages 'components', in the more update to date Angular jargon, and you want to navigate between them, passing your search term as a variable.
In your search page, you will need some code along the lines of
$router.navigate(['ResultsPage', {searchTerm: yourSearchTermGoesHere}]);
When the results component activates, it should check for the existence of a search term and perform whatever search processing is done when the search term subsequently changes.
Router docs - https://docs.angularjs.org/guide/component-router. Have a look specifically at the 'Extra Parameters' and 'Lifecycle hooks' section
I have a plunker at here , which includes a form on the left. When the form is submitted, I wish to display the results as a ui-view on the right column. I use the ui-router to do this in the vm.search() function associated to the search button:
$state.href('/results');
however, the results page does not get loaded when the form is submitted. Could someone point me to the right direction for research or give me some quick hints/answers? I appreciate it
The problem was with the href usage, if you use go it works:
$state.go('formResult'); //display the results page
$state.href -
A url generation method that returns the compiled url for the given
state populated with the given params.
Example:
$state.href("about.person", { person: "bob" }) == "/about/bob"
Is there any way to only execute a function in the controller on the page refresh instead of going the another ng-view?
I got a view with items in a list. When I click on one of the items it goes to a detail page where I pass the data to a service and get it back on the detail page, so I dont have to call another $http request for getting the single item data.
This works, but when I hit f5 I want to execute a function to execute a $http request to get the item data. When I hit f5, of course the data isn't in the service anymore.
Thanks in advance!
The solution to this is that in your route / path / url, you need to add the ID or unique property that identifies the item whose detail that you are checking out.
So, let us say that you are on the path /template/items.
When the user selects item 2, you then change the path to /template/item/2.
In your $routeProvider have the route defined as:
$routeProvider.when('/template/item/:itemId', {..});
The itemId will provide the ID associated with the item.
In the controller, using $routeParams you can then read this ID using $routeParams.itemId.
Query your service and see if it has details of this item with it. If not, then proceed with the $http request.
That way, even if you refresh your screen, the Item ID is still present in the url from which your controller can retrieve it and carry out the appropriate action.
I wish to have a page called "index" with a corresponding url "domain/controller/index" and another
page called "admin_index" with a corresponding url "domain/admin/controller/index".
The trick is that i want both pages to use the same view to render and the same function for the logic while on of the page's parameters are a flag indicating to the view from which url the view is rendered.
I need it because currently in my "index" page I have table with data.
The page also has a smart filter for that page which requires a respectful amount of logic in the controller side.
My problem is that currently there is an "Edit" button in each line which I don't want to share to all the users.
Currently I'm using the admin prefix to handle this kind of pages by protecting them by limiting the access from the web-server (Apache in my case).
Any ideas of how to implement this without duplicating the controller function?
Try this (I've tested it on my CakePHP 2.0.x app, but there's nothing in this code that should be 2.0 specific):
//controller
public function index($admin = false) {
$this->set(compact('admin'));
}
public function admin_index() {
$this->index(true); //calls the index function to do all that stuff
$this->render('index'); //tells it to render the 'index' view
}
When you hit the /index page, all should be as normal. When you hit the admin_index, it runs the logic from the index function, then specifies to use the index view.