bfredo123 bfredo123 - 2 months ago 12
AngularJS Question

AngularJS: Editing a "pick-one" field in a separate view

I am developing an AngularJS 1 (+ Ionic + ui-router) single page app. Among other things, the app lets 'CRUD' employees and companies.

I am struggling with the "edit employee" page. This page shows fields for first and last name, and has a button to select the company in which the employee works. When the button is clicked, a new view is opened, listing all the existing companies. The user can then select one in order to assign it to the employee, and get back to the former screen (employee edit), which then displays (read-only) the name of the company.

My issue is that when getting back to the 'edit employee' view, its controller is reloaded, and thus the changes made to first and last names are lost, because the controller starts with loading the employee information from the database.

To summarize what happens:

  1. the user opens the edit employee view

  2. the edit controller loads employee data from database and populates the view

  3. the user changes the first name to a new value (say from 'John' to 'Allan')

  4. the user clicks the "choose company" button

  5. the company list view opens, and displays the list of companies

  6. the user selects a company in the list

  7. the controller stores it through a service as "current company" global variable, and goes back to the edit employee view

  8. the edit controller is started again, and reloads the data from the database, and repopulates the first name with John. It also reads the company global variable to display its name.

  9. as a result the change to 'Allan' is lost :-(

So my question is: what is the good practice to manage this kind of editing?

Also, if you have a better way to transfer the company from the company list view, to the edit employee view, rather than using a global variable, I would appreciate.

btw, I would like not to save the employee changes prior to opening the company list, because I would like to let the user fully cancel his edits in the end.

Many thanks for your help


To persist form's state you can use a service. When edit form scope is destroyed with some unsaved changes, you just save this data to service. Inside this service you can even store it to local storage to keep data after page refresh.

But the better way is to have simple drop down on edit form. If there's too much information, you can use modals or like that.