MEAN Stack – Styling our AngularJS UI Customer Update Modal – Day 21
The MEAN Challenge Continues!
This video is part of the 30 Day MEAN Stack Honolulu Challenge
In this video we’ll continue setting up our Update Customer Modal instance using Angular UI. We’ll focus on formatting and styling the Modal window to include the fields and styles that we need based on our wireframes.
We look at:
– A recap of our Angular UI Customer Update Modal
– Connecting to the customers scope to pass a selected customer’s details through to our Modal
– Updating the html template so that we have the formatting and styles as per our wireframes
– Testing to see if our Modal works with our ng-click directive
– Updating our html styles based on styles which are already part of the modal classes
– Passing through the details of a selected customer to the Update Modal
The functional design post mentioned in this video with the use case, storyboard and wireframes can be found here: Home Page Design.
I have a problem that I followed your steps (“data-ng-model=”customer.firstName”…) and did same coding, but in the model, there still were no data come out. I don’t know why, could you help me?
Hi Joe, it’s a tricky one without seeing your code. Are you seeing any error messages?
I have two questions,
1) I did the same process what you have mentioned for popping out a model when you click the customer. In my case i got the modal but i get the background also the same as modal. I mean when you click on customer then just this customer modal must appear good and the background must little blackish and blurry. But i get the same in modal and in background. What to do?
2) As per this app while popping up a modal we are going to update customer. But in my app, the requirement is just view the customer. I mean when user click on customer then it must show the detail of that customer in modal and the user who have created the customer, only he/she can update the customer. How to do this?
Shristi, this is my final year project so i have a close deadline now and after that i am about to finish it.
your help will be really helpful for me.
Thanks and Regards,
For the first item, here are some options: http://stackoverflow.com/questions/26926798/angular-ui-modal-directive-backdrop-missing
For the second item, there are quite a few ways to implement this requirement. One option would be to split the code prior to, or at the point that the user clicks on the customer record, another option would be to just split the code in the modal view using ng-if.
Btw, what did you use to create the wire frame & the work flow chart?
I like to try out new programs all the time, the Wireframes were done using Adobe Illustrator with material design and bootstrap templates.