MEAN Stack – Answering Q’s with CSS & AngularJS directives – Day 28

The MEAN Challenge Continues!

This video is part of the 30 Day MEAN Stack Honolulu Challenge

In this video we’ll clean up our app and answer some questions sent through via email and posted on the Bossable.com site. We’ll fix some errors, pretty up our customers list, add a picklist using ng-options, and fix the alignment between channel and email.

We look at:
– Fixing some of the task errors identified by Grunt
– Using Chrome to test out adding some padding between the customer records in the customers list
– Adding a new class with padding to our customers css file
– Using ng-class to add some colours to the customers list based on the referred field
– Increase the size of the icon on the customers list
– Adding drop down values to our app using ng-options
– The AngularJS documentation and examples for ng-options
– Adding ng-options to our controller and edit customers client view
– Testing our new picklist in the Update Customer Modal
– Fixing the alignment of fields between the Channel and Email fields

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 – Express.js & Client-side Assets – Day 29
Previous

MEAN Stack – AngularJS Notification Service – Day 27

3 Comments

Let me know what you think

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

  • Adam Rivera
    Reply

    Hi,
    I tried to implement the dropdown box. I was able to display the array, however when you update the form it sends [object][Object] to the database instead of the value selected. Also if the field already has a value it shows the —choose value– text.
    Is there anywhere you can point me to solve this issue? I’ve looked on line and nothing has worked so far. Thank you,

    • bossable

      Hey Adam, try changing up the syntax a little to this: ng-options=”channel.id as channel.item for channel in channelOptions”.

    • Adam Rivera

      I tried the syntax change and it pushed the id #. So I thought if it was pushed the id from the array, then I’ll see what happens if I changed it to this:

      ng-options=”channel.item as channel.item for channel in channelOptions”>

      It worked! It pushed the value to the db, and displays the value after update. Thank you!!

      I really liked your challenge, its helping me get a good beginning for MEAN development.!!