SBP Blog

AngularJS – how to write a simple application for listing products

Sep 01, 2016 by AdrianC

In the first article you got to know something about Angular, and now it's time to get underway and see it in action.

The application that I'm boing to present lists a number of products that can be selected, their total price being updated and displayed in real time (using two way data-binding). This is done by creating an Angular module and attaching a custom controller to it.

The products are displayed using a ng-repeater and are selected using the ng-click functionality from Angular, where the new total is calculated and it's automatically updated in the website, using two way data-binding.

Disclaimer: Please be advised that we are not responsible for any food or hunger related problems that you may encounter during this tutorial. :)

This is the HTML code sample:

<html ng-app="myApp">
        <script type="text/javascript" src=""></script>
        <script type="text/javascript" src="javascript.js"></script>
        <link rel="stylesheet" href="stylesheet.css">
    <body ng-controller="productsController">
            <ul class="productsList">
                <li ng-repeat="product in products" ng-click="selectProduct(product)" ng-class="{selected: product.selected}">
                    {{ product.title }} <span>{{ product.price | currency }}</span>
            <div class="Total:">
                Total: <span>{{ total | currency }}</span>

This is the JS code:

var app = angular.module("myApp", []);

app.controller('productsController', ['$scope', function ($scope) {
    $ = 0.00;

    $scope.products = [
            title: 'Water',
            selected: false,
            price: 1.25
            title: 'Cold Soda',
            selected: false,
            price: 1.0
            title: 'Tasty Fries',
            selected: false,
            price: 3.25
            title: 'Fresh Hamburger',
            selected: false,
            price: 4.50
            title: 'Delicious Steak',
            selected: false,
            price: 15

    $scope.selectProduct = function(product) {
        product.selected = !product.selected;
        $ = getTotal();

    function getTotal() {
        var total = 0;
        angular.forEach($scope.products, function(item) {
            if (item.selected){
                total += item.price;

        return total;
    $ = getTotal();

And this is the CSS code:

* {
    font-weight: bold;
    color: #FFFFFF;

div {
    background-color: #14A27A;
    width: auto;
    padding: 20px 60px;
    border-radius: 4px;

.productsList {
    list-style: none;
    color: #000000;
    font-size: 18px;
.productsList li {
    padding: 10px 20px;
    background-color: rgba(2, 33, 65, 0.63);
    box-shadow: 1px 0px 0px 0px rgba(255, 255, 255, 0.15) inset, 1px 1px 1px 0px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 20px;

.productsList li span {

.productsList li.selected {
    background-color: rgba(146, 222, 147, 0.81);
    color: #000;

.total {
    padding: 10px 0px 0px 40px;
    font-size: 20px;

.total span {
    float: right;

Now that you've seen it in action, it's time to get underway and start practicing with Angular yourself. If you've created some interesting Angular snippets in the past, please feel free to share them.


No comments yet.

Your Comment: