Note: I am not well versed with angularjs/frontend dev as such, so I may be using wrong words/terms.
I have a form as a result of a html and a controller. Controller has functions defined which are invoked when user performs some actions as defined in html, like clicking a button.
One of the UI element in the form is ui-select. It enables user to select multiple values from a dropdown.
What I want is that when user clicks on one of the selected value from ui-select, a new dialog window opens up wherein user can provide some input value, close it, return to original open form, and value from dialog box gets appended to the original clicked value from ui-select.
I want to know what is best way of creating an input dialog box in angular.
I see $uibModal being used which can be used to create a form by combining a html and a controller. But I have a usecase for a simple dialog box. So it seems $uibModal is bit of an overkill.
Is there an easier way of doing this?
Related
I cannot figure out how to make a two-way-binding to an mddialog. Can anyone give me an example, where data passed to a mddialog is updated when it is updated in the original scope?
I have tried parsing data using 'locals' with no avail, setting the dialog scope to the main scope, etc. But I must be doing something wrong.
As an example I expect a mddialog to be open (using $mdDialog.show()). The modal template show a number, that can be increased by one when clicking a button on the dialog template. At the same time, the number is also outside the modal (parent), with another button that can decrease the number when clicked. The number is updated in both places when either button is clicked.
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'm using the UI-bootstrap modal window in my Angular application and I'm running into some kind of a scope problem.
I've got a modal dialog which basically has two modes. At first, it displays a list of existing items for the user to select from. In case the item the user needs is not in the list, he can click "Create", then I hide the div containing the list and display another div which contains an input form so the user can add an entry to the list. This is all really trivial stuff. The buttons to toggle which div is being shown work fine. I basically have a boolean scope variable called "create", which takes care of this.
Then, in the modal-footer I have two save buttons. One is shown when in "list" mode and the other is shown when the user is in "create" mode. Again, works fine.
Now, when the user is in "create" mode and clicks the corresponding "save" button, then I need to process the form and finally switch the state back to the list, that is set the "create" scope variable back to false, but this is not working for me. It's like I'm dealing with more than one scope since the view does not update when I update the "create" variable from the button click in the controller.
I've created a working Plunker which demonstrates this, please have a look:
http://plnkr.co/edit/KDxzH21Lmthg0bc0cfUT?p=preview
I know this is probably something really simple I'm missing. Hoping someone can point me in the right direction!
EDIT: As per the suggestion below from Mik378, I created an "intermediate" object in the scope and assigned the "create" variable to it. Now this works like I wanted to.
I updated the Plunker: http://plnkr.co/edit/KDxzH21Lmthg0bc0cfUT?p=preview
If you're using scope.myVariableToReach, you have to change that by scope.oneIntermediateObjectNotAccessibleInTheChildScope.myVariableToReach.
Otherwise, when you set scope.myVariableToReach directly, it would change the child one, not affecting the outer.
I am working on AngularJS and Bootstrap. I am new to both. I wanted to create one form which include firstname input textbox,lastname input textbox , city dropdown and add button called addUser.
When I click the add user button it should be saved in our database and then displayed in below grid with edit and delete button. When I click the edit button, all record comes under above corresponding textbox. I have gone through below link but i didn't get my scenario implementation, in that they used xeditable.
http://vitalets.github.io/angular-xeditable/
Here is an form example made with angular link
Basicly you need to create a controller. In your controller create a user object, bind this object properties to form contollers with ng-model. When user clicks a button send user object to a method in your controller, add ng-click to your buttons. In your functions, you can do create, edit, delete actions.
Please refer the link and check the highlighted keywords, this must cover all of your needs.
I have a scenario and i ma getting no where:
I am having 20 record and i m using pagination via standartcontroller and my page size is 1.
one by one record are displayed on the screen and i am having a list or radio button to select options.
When user select a radio button i am getting its value and fill a map with record,value for some processing.
What i want to do is that when a user hits back button the option he has selected in radio button must be visible there. But its not coz every time i m filling new values in the radiobutton list so old values are not sustained.
What i want is when user hits back button he should be able to see the old radio button selected.
How can i achive this:
1.Is there any way to make a radio button list's values be checked through controller.
2.Do I need to use wrapperclass to do this.
Help needed.! Thanks
It will be easier to put this field into object. If you don't have such field in you sObject than I would suggest to create wrapper class in your controller and display list of this wrappers instead of your native sObject.
If your radio button field is already part of the object, then there's no need for a wrapper class, but if the radio button doesn't need to be part of the object then use a wrapper class to keep the object simple.
Check out this example of a wrapper class with check boxes.
Wrapper classes don't have to be complex.