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.


jkljkl commented on 10/4/2019 9:42:14 AM


Your Comment:

Blog Home   SBP Home
RSS Feed       Contact


 Blog Archives  |  Terms of Use  |  Privacy Policy
© 2019 SBP Romania. All rights reserved.