I am new to AngularJS, I have a dropdown and a link. When I click the link, Anagularjs will route a different view (for example, display a chart and table).
Then when I click browser's back button, the dropdown will show the default value, other than the value I selected before.
Is it possible to let AngularJS remember the selected value of my dropdown when the link is clicked when I click browser's back button?
<select ng-model="selectedManagerFilter" ng-init="selectedManagerFilter= selectedManagerFilter || '*'"
ng-options="item.Code as item.Name for item in ManagerFilters" id="lstManagementGroup" name="lstManagementGroup"></select>
Your scope will get cleared when you exit the page and recreated with the default values when you get back to it.
You have 2 options:
use a Service to keep this kind of information (like selectedItem from your dropdown) and other useful things. The option selected in the dropdown should be bound to the service object:
angular.module('shared').factory('UsefulService', function() {
var UsefulService = {};
UsefulService.myPageSettings = {
currentDropDownItem: 1, //this is what you need
otherSetting: "blah"
};
return UsefulService;
});
and in your controller you should bind the scope variable to it (don't forget to require the UsefulService in your controller's dependencies):
$scope.myDearSettings = UsefulService.myPageSettings;
and then access it with $scope.myDearSettings.currentDropDownItem;
you can set a hash on your route when the dropdown changes (bound to the value) so when you hit Back you will get to the same state because of the hash. Basically, the url in your address bar will look like: http://your_server:your_port/myPage#Today where Today is the selected item.
The most recommended solution is option #1.
Related
I have a combo box that gets populated by an odata call.
From the home page, I navigate to a page with this combo box, and I want this combo box to select the first item of of an ODATA call as the default/selected item.
I use bindAggregation to populate my Combo Box in the onInit() function
After the object is bound, I want to read the list and take the first one and select it.
bindComboBox: function() {
var comboBox = oView.byId("ComboBoxID");
comboBox.bindAggregation("items", {
path: path,
parameters: param,
sorter: sorter,
template: template,
filters: filter,
events: {
dataReceived: this.selectFirstItemFunction()
}
}
selectFirstItemFunction: function() {
var comboBox = oView.byId("ComboBoxID");
var comboBoxItems = comboBox.getItems(); // This ends up being undefined.
comboBox.setSelectedItem(comboBoxItems[0]);
}
When I'm doing this, var comboBoxItems in selectFirstItemFunction() is always empty/undefined.
I also tried putting selectFirstItemFunction() inside onAfterRendering() and that didn't work either.
If the page is already loaded, and I do selectFirstItemFunction() then the combo box works as intended.
Any thoughts on how to get the combo box loaded up correctly?
You are not attaching the "selectFirstItem" function to the event. You are directly calling it when executing the "bindComboBox".
Correct it with this:
dataReceived: this.selectFirstItemFunction.bind(this)
But be careful, because "dataReceived" may not be fired if the data is already cached. So maybe you want to use the "change" event
change: this.selectFirstItemFunction.bind(this)
I have created a plunker that communicates between two different controller in nested views using factory. Below is the url of plunker.
https://plnkr.co/edit/fWA2Xugjbkf3QvHKfTa0?p=preview .
Here is the factory.
routerApp.factory("widgetService",function($state){
var callbackFunctions=[];
var counter=0;
var addWidget=function(name){
callbackFunctions[0](name);
}
var addCallback=function(callback){
if (callbackFunctions.length===0) {
callbackFunctions.push(callback);
}
}
return{
addCallback: addCallback,
addWidget: addWidget
}
})
Scenario 1:
1. Click on "List" menu under the home page.
2. Click on "verify" button. notice the change in highlighted area with yellow. Text changes from "Chandan" to "singh1".
3. Click again on verify button. Text changes from "singh1" to "singh2". So i am able to communicate between two controller in this.
Scenario 2:
1. Repeat the scenario 1 till step 2.
2. Click on "PARAGRAPH" menu under home page.
3. Click on "List" menu under home page. Click verify button. The text wont change. It will remain "chandan".
Communication is not working as we change the state.
Also i have observed that the model is changing but same is not getting reflected in view. Moreover if we bind the view to rootscope, view is getting updated.
Please clarify.
When you switch between list and paragraph states, your list controller is destroyed (and recreated next time you go to list). So when it is recreated it gets a new scope.
The callbackFunction that is registered in your service, refers to the changeMyName() function on the old controller scope, so whenever you call addWidget() in your service, you're actually calling the callback in your old scope.
To make this work as expected (at least in your sample code here), you would have to change your service to allow changing the old callback in the addCallback()-function. Something like this:
var addCallback=function(callback){
callbackFunctions[0] = callback;
}
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
I have a simple requirement where out of multiple pages, I have one Settings page in Ionic app, where I am allowing the user to toggle one data(say, language) that is maintained in LocalStorage in the app(via a factory).
This 'language' is used in all views(controllers).
I have Back button on the view but when user changes 'language' through Settings page(I update LocalStorage) and want to go back through IonicHistory back button to the preview view, change does not show up after going back.
"Previous view" uses LocalStorage.Language to fetch data
Back button uses following code:
$scope.goBack = function() {
window.history.back();
}
Can anybody help here or any workaround for this is possible.
Ionic caches views in the current navigation history. In order to update the view everytime you come to a view, you should use $ionicView lifecycle callbacks like .enter, .beforeEnter etc. The code written as part of these callbacks are executed everytime even if the view was cached:
$scope.$on('$ionicView.enter', function() {
// Get your settings data here to reflect it on page everytime
})
For details refer: http://ionicframework.com/docs/api/directive/ionView/
I need to set the cq:tags which is configured in page properties of the page to a node (jcr:content/samplenode). I overlay the page component but I didn't find the code to customize. How to set the page properties values under a node in the currentpage ?
If you want to save the value of the default tag field in the page properties at jcr:content/samplenode/cq:tags instead of jcr:content/cq:tags, then change the value for the property "name" in the tags widgets from ./cq:tags to ./samplenode/cq:tags
For the default page component, the tag widget can be found at the location /libs/foundation/components/page/tab_basic/items/basic/items/tags.
EDIT:
Though i wouldn't suggest the following approach, inorder to achieve your required functionality, along with the above mentioned changes, add a beforesubmit event listener to the dialog with the value set to the following function.
function(comp){
var response = CQ.HTTP.get(CQ.WCM.getPagePath() + '/_jcr_content/samplenode.json');
if(!CQ.HTTP.isOk(response)) {
comp.getField('./samplenode/cq:tags').name = 'cq:tags';
}
}
The dialog listener is to be added as shown in the picture below.