I have set of tabs and a combo box(for time frame) in top.html file , which loads in all pages.
I am rendering the pages according to tabs selected using angular JS.
I want the view to update when time frame is changed using the combo box , i.e to call respective controller of that page.
I have no clue what page is currently rendered as the combo box is in different file.
Is there any way of invoking the controller on event change ?
use respective event and call the method of controller. For example you can call controller method on click event using ng-click,and similarly so on.
I hope it may help you.
Related
I have a UI Grid configured for my site. I have used expandableRowTemplate to expand it to show some simple content when user clicks on the expand button. Right now it shows the content properly.
But my requirement is when user user clicks on the expand button apart from expanding and showing the content it should also call a backend service to send some data to server and receive something.
Is this scenario possible in UI Grid? I am using Angular 1.5 and Ui Grid 4.0.1.
There's public API event which is fired when a row is toggled.
You can provide a function calling the REST service to this event.
gridApi.expandable.on.rowExpandedStateChanged(scope,function(row){})
And if you want to make a call only if the row is expanded, I see only 2 ways:
Either you have your own one redundant key to each row as row.isExpanded and toggle it inside this function and use for your purpose.
Or you can find if row inside this function is included in getExpandedRows()'s result. This is hilariously redundant.
Source: http://ui-grid.info/docs/#/api/ui.grid.expandable.api:PublicApi
I am adding some number of textbox controls on a button click and entering some text on each textbox, then am navigating to another one page, and coming back to my initial page. am not able to see my textboxes...
Is there any way to keep my textboxes and values of each textbox in angularjs?
Create a service or factory to communicate between different controllers or in your case page.
Please refer this. Hope it gives you some idea.
Thanks
I am using ng-repeat for iterating through a list of objects, and for each item in the list there are child objects which are edited in a Bootstrap modal popup. I am unable to use the Angular modal service as it conflicts with the Bootstrap CSS already in use on the page. Angular modals would let me take values back from the modal popup on modal close, but I am unable to use it due to existing code.
To work around this problem, I am passing the child object to the function that opens the modal popup. In this function, I assign this passed object to an Angular model/jQuery Object (say "x") (either way I tried, it gives same result) so that I can update this new object x with the changes done in the modal popup.
I believe that these variables as copied and points to the same object, when I update one, it should update the other one and so my original Angular model should be updated as well. But, to my surprise, the original model is not updating until I open the modal popup again. When I open the modal popup again, it does not update variable "x" but merely is updated with the ng-model I use on page.
To debug this further, I printed my ng-model on page and it is not updated till modal popup is opened again. To contrast this further if I alert length of this ng-model, it is updated (shows the changes I made in modal popup) but the ng-model object on page does not show new values.
I understand this is more of a theory and less code but I am not sure what part of my code would help find the problem. Kindly let me know and I will try sanitize my code and share.
Update:
While further digging, it looks like the model is updated but it did not reflect on page. So if for example on page I have condition that if no child objects, show Add button (edit otherwise), it does not change from add to edit button when I open modal first time and add values to child objects. When I open modal popup again, it changes link from add to edit even if I close modal popup without changes. So it is a problem with screen refreshing as such (my model updates reflecting on screen) instead of actual model update.
I am trying to get two multiselect widgets to stay in sync, but am only able to get the behaviour going in one direction.
One widget is on the main page, and the other one is in an angular ui-bootstrap modal. Both multiselect widgets are created using a custom directive. Each instance of the directive is bound to a different controller (MainCtrl and ModalCtrl). The "selected" attribute of each instance of the directive is bound to a scoped variable in their respective controller, which is in turn bound to the same getter method in the Model (getSelectedFilters).
If I change the selection on the widget on the main page, the change is reflected in the widget in the modal panel. However, if I change the selection in the modal panel, the change isn't reflected in the widget on the main page even if the Model has been properly updated (the button "Show currently selected" will show the correct selection even though the widget doesn't). I don't understand the difference at all.
Here is a stripped down plnkr illustrating my problem.
http://plnkr.co/edit/nC5bkGFE4LkYZsaxdjL7?p=preview
I am entirely new to Angular, and would appreciate any input as to why my directive on the main page isn't being updated properly when the data in the model changes.
Version 7 of the plnkr was what I had initially posted.
Basically, calling $apply on $scope.selected whenever the value was changed was not enough to notify the other directive of the change. I also had to setup a $watch:
$scope.$watch('selected', function(newVal, oldVal) {
select2.val(newVal).select2(options);
});
I am now completely unclear as to why the select2 directive in the modal was updating at all without a $watch when I was modifying the select2 directive on the main page. I would love if someone could explain what was going on there! To anyone who might know, go back to version 7 to see what I mean.
In an Ext Js-application I am working on I have a formpanel that contains (among other controls) three comboboxes, each with a different datastore. I need to load the form with existing data and display that in the form. This works for all simpel controls (textboxes, checkboxes) but there is a problem with the comboboxes.
The comboboxes each use a datastore but I can see that there is only one store loaded before the form loads its own data, causing that one combobox to display the correct text and the other two the value. If I click and close the combobox without making a selection the correct text appears.
Is there a way to either delay the loading of the form or the binding of the form until all datastores have loaded? The datastores are local stores with autoload and the formpanel calls its own load in the afterlayout-event.
The problem is that the setValue executed by loading your form is executed before the stores of the combo boxes are actually loaded.
You could try to implement the fix condor and animal of ExtJS have propsed in this forum thread on sencha.com: http://www.sencha.com/forum/showthread.php?75751-OPEN-42-ComboBox-s-setValue-call-with-a-remotely-loaded-Store
It basically just delays the setValue call on any combobox until the store of the combobox is fully loaded.
Load the form panel after the rendering is complete. Is there any specific reason you are loading the form in afterlayout event?
Load the form in afterrender event rather than afterlayout. the afterrender event happens when all form is completely rendered.