Saturday, June 27, 2015

ANGULARJS Print Bootstrap Modal Content

When trying to print a modal dialog, we may not need to see the main layout content mixed with the modal content on the print out.  This is however the default behavior when we try to print a web page.

In order to print the modal dialog content, we need to hide the main layout and only make the dialog content visible. This can be achieved by adding print media styles which only affect the print out and not the screen media.  Let’s look at a printing a simple invoice example shown below:

Print modal content

Note that in this example, we have two actions/buttons:

Print Modal Dialog:  Prints out the modal dialog content only.    
Normal Print: Prints out the entire web page.

For the Print Modal action, we add the print media styles to hide the entire content of the page. This allows us to prevent the layout elements to be visible in the print out. We also need to print the modal content. To do that, we add a style class (print-content) and attributes to the Bootstrap .modal class which allows us to override the default modal style. As a result, only the dialog content is shown on the print out.

We should note that this approach is not specific to AngularJS. It is a technique that can be used with any JS framework as the changes are specific to CSS classes and not the framework.

Thanks for reading.

Saturday, June 13, 2015

ANGULARJS Calculate Totals Using Directives

In this article, we show how to do a calculation of subtotals and totals using AngularJS. To illustrate how we can do the aggregates, we build a simple invoice in which we will add the total quantity of items and subtotals per item and final amount. 

We first start by showing the JSON model that represents a list of items with quantity and cost per unit. These are the amounts that we will be adding using directives.

$scope.items = [{
    name: 'Baseball Bats',
    quantity: 2,
    unitCost: 75
}, {
    name: 'Soccer Balls',
    quantity: 5,
    unitCost: 15
}, {
    name: 'Baseball Gloves',
    quantity: 3,
    unitCost: 40

As shown in the JSON model, there is quantity and cost information, but we need to add a new attribute that can provide the total for each item by using this simple formula (quantity * unitCost). We also need to provide a total amount for both the sum of items and cost.

In order to meet our goal, we use the ng-repeat and ng-init directives. The ng-repeat directive allows us to iterate every item in the list. The ng-init directive allows us to execute an expression or call a function for each item. This is what enable us to extend the model by adding attributes which will hold the total amounts. We can see this with the following code snippets:

The setTotals function in the invoice controller calculates each item total. It also uses the invoiceCount and invoiceTotal scope variables to aggregate (sum) the quantity and total for each item.  This is what allows us to generate a total row in the grid.

I hope this post provides you with more ideas on how to deal with calculated values using AngularJS.

Sunday, May 24, 2015

AngularJS Value Mapping With Dynamic Property And JavaScript

In some scenarios, the JSON models that we have available on the client browser may not provide all necessary information for our view templates. A record may just have a numeric value which makes reference to another model in the system, and we need to be able to map or look up for that information. To illustrate this, let’s look at a dealership inventory vehicle list:


$ = [{ model: 'Altima', year: 2015, make: '1' },
            { model: 'XTerra', year: 2015, make: '2' },
            { model: 'Focus', year: 2015, make: '3' }];

$scope.makes = [{ id: 1, name: 'Toyota' },
                { id: 2, name: 'Nissan' },
                { id: 3, name: 'Ford' }];

The models show a list of makes and vehicles that any dealership may have an inventory. We want to build a view that shows the vehicle list. When using the cars list and the help of the ng-repeat directive as show below, we get this result.

As we can see, there is no Make 1,2,3. That is the MakeId. We would like to display the name instead. The problem with this is that the cars list only has the id, so we need to implement a look up with the makes list.  A way to do this is to create a dynamic property with the Make name on the cars list. This can be accomplished by using the ng-init directive which allows us to use an expression or call a JavaScript function.

The ng-init directive calls the controller function to initialize each row in the list. The function performs the look up in the make list and adds the new property makeName which is used on the HTML mark up.

We should note that this approach was done using ng-init directive and a function on the controller (JavaScript). Another approach can be done using the ng-repeat directive and a filter right on the HTML mark up. Read more here.

Thanks for reading.