AngularJS Data Grid with Paging

With AngularJS, we can easily display a data grid with some data by just binding a JSON model to a view. In cases where the data is somewhat large, we would like to provide users with a much better experience by adding paging to the grid.  We should note that the purpose of this article is to show a technique for client side paging. For much larger data sets, this approach may not be recommended. With...

AngularJS Data Grid with Filters

AngularJS ability to bind a model to a view can be leveraged to design very interactive user interfaces that can help improve the user experience. A very common user interface enhancement is to allow users to filter the data that they are working on.  We can easily build such feature in our applications...

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...

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...

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: Models: $scope.cars = [{ model:...