I generated one application using JHipster V3. I am trying to modify the search functionality and adding some kind of filter where user select some filter and hit search button and my angular search controller will make a POST call to my API.I did modification on server side to support filter search and return data.
Now I want to modify pagination link so that they also make a POST call with selected filter data instead of GET.
I did some investigation and found that when user click on link call goes to 'ui-bootstrap-tpls.min.js' [selectPage] function.
I dont want to make any changes on this js as it is global and will work for other UI screen.
Is there any better approach to implement such requirements?
Related
I want to implement predictive search using angular. Suppose, there are data of tens of thousands of employees then it's not feasible to preload all the data and use filter to on it.
How can I perform the same task? I want my search box dropdown <div> to show results just like its shown in Google Search.
I would use angular-ui-bootstrap typeahead directive: https://angular-ui.github.io/bootstrap/#!#typeahead.
See this post for making calls to a server : How to tie angular-ui's typeahead with a server via $http for server side optimization?
If you don't want to preload that much data on the browser you will need to do it server side and provide an API that will accept search params, search the database, and return a list of matches. I suggest reading up on type-aheads.
I'm trying to figure out how I can get query parameters in the url using UI Router and AngularJS UI Bootstrap Typeahead fully working.
I have it working (well... kind of). What happens is that you have to search twice, once puts the query in the url and twice gives you results. Not ideal.
After doing some more searching and reading, I found this answer and it seems that using an $http service would be a good way to go. However, I'm only using ONE controller with 2 views. Will that still work?
UPDATE
The answer in the link provides an answer based on having 2 controllers, whereas I only have one controller.
So my question(s) is would using an $http service to store my query in enable me to put the query parameter in the url using UI Router and AngularJS UI Bootstrap Typeahead? Is this SOLEY a UI Router issue or is UI Bootstrap Typeahead play a role in this?
Code:
In my controller I initialize the relevant code like this:
$scope.searchTerms = $stateParams.searchTerms || '';
and use $state.go in my search function like this:
$state.go('search', {q: $scope.searchTerms});
It works like I said, but only after submitting the search query twice. Trying to figure how to get it working normally.
I'm attempting to build a simple form using Drupal's editableviews module. The problem is that I want to modify the module so that instead of updating a given field's values via a change event and an AJAX call, I want to require a click of the Save button.
I think the AJAX update functionality is provided by the Entity API, but I'm not sure how to disable this when the fields are rendered in the view. Any ideas?
I have a small admin page setup with ng-admin. Creating elements works without any issues.
What I want to achieve though is that I sent the user to a different page where he can perform some action that will alter the created item(scraping some data elsewhere for the element and asking if its correct).
Is there a way to overwrite the custom route that is on the submit button in ng-admin to sent the user to a custom page, also inside of ng-admin?
I would like to not tinker with the ng-admin code to not break the functionality on other elements pages.
Tere is no built-in way to do that in ng-admin 0.9. But a recent addition to the 1.0.0-dev branch (view.prepare()) might help you, see https://github.com/marmelab/ng-admin/pull/756.
I have a simple app built with AngularJS routes which is loading the controller and template for each path. I have a register form and login form on separates paths/templates. Say I go to the login form (/#/login) and enter my username/password, if I then hit "Register" (redirects me to /#/register), and then I hit back in my browser, it will return me to /#/login but the form will now be empty; the information I typed in has been removed.
Expected behaviour would be that the form data is still there.
Anyway to make that happen (without manually caching the data in a service)?
I'm guessing when the page changes, Angular is tossing the old template data and reloading the template again. Is there a way to instead cache that page template/DOM and reload it when the user returns to that path (instead of downloading and showing new template file)?
Well, this is a bit tricky. The browser should implement this kind of feature out of the box. Firefox started doing some work around this "issue" but I don't really know the current status of it.
Alternatively you can use a bit of javascript with LocalStorage to make this works. You're using AngularJS you can create a Directive that encapsulates this feature to be used on multiple places.
Basically you need to create a mechanism that translate an field to and unique-identifier and a value. Every time the user type on the field, you update the store. If the user "finish" the interaction on the form, you clean the value from the store.
You can also grab a jQuery plugin and just create a directive that uses the plugin.
https://github.com/kugaevsky/jquery-phoenix (never tested it).
TL:DR
There's nothing you can't do using a DOM property/attribute or something similar.
You'll need to get your hands dirty on some javascript to make this happen.