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.

Next

MEAN Stack – Save data with an AngularJS Modal – Day 22
Previous

MEAN Stack – Pass Customer Details to an AngularJS UI Modal – Day 20

6 Comments

Let me know what you think

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Joe Zhou
    Reply

    Hello Shristi,

    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?

    Thank you.

    Joe

  • Harsh
    Reply

    Hello Shristi,
    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,
    Harsh Soni

    • bossable

      Hi Harsh,

      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.

      E.g

      In the view:
<div ng-if="UserIsCreator">
 //When the User is the Creator
</div>
<div ng-if="!UserIsCreator">
 //When the User is NOT the Creator
</div>

      In the Controller:
$scope.UserIsCreator = function() {
//Check if the authenticated user matches the record creator
//return true or false
}
    • bossable

      I like to try out new programs all the time, the Wireframes were done using Adobe Illustrator with material design and bootstrap templates.