How to Display All Products Using AngularJS: A Comprehensive Guide

Rumman Ansari   Software Engineer   2024-07-28 05:15:43   382  Share
Subject Syllabus DetailsSubject Details
☰ TContent
☰Fullscreen

Table of Content:

Display all Products

1. Display all Products

  • There is a shopping application, Pick2get where users can view and buy products.
  • Write a program to display a list of products with Product name, Brand name, Price, Discount value, and Product image as shown:
  • Note: You need to add logic to the UI elements. Create a scope variable products that holds an array of products, where each product contains properties like: 

name: Happy Cycle
discount: 20%
price: 2500
brand: Wheels
image: cycle.jpg
quantity: 2

Sample Code

index.html 

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min.js"></script>
    <script src="index.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
    <div class="topnav">
        <a href="#" style="float:right;font-size:20px"><i>Check out</i></a>
        <a href="#" style="float:right; font-size:20px"><i>Sign In</i></a>
        <a href="#/Home" style="float:left; width:150px;" class="active"><b><i>Pick2get</i></b></a>

    </div>
    <br />
    <div class="search_drop_down">
        <select id="month" class="select select-styled" >
            <option value="hide">-- Brand --</option>
            <option ng-repeat="pdt in products" >{{pdt.brand}}</option>
        </select>

        <select id="year" class="select select-styled" >
            <option value="hide">-- Price --</option>
            <option value="low_price_to_high">Low Price to High</option>
        <option value="hign_price_to_low">High Price to Low</option>
        </select>

        <input class="search" placeholder="Search" size="40" type="text">
    </div>
    <div class="product_box" ng-repeat="pdt in products">
        <div class="single_1">
            <div class="container">
        <div class="discount">
            <div class="discount_badge">{{pdt.discount}}</div>
            <span class="discount_text">Discount</span>
        </div>
                <img src="img/dummy_product.jpg" />
            </div>

        </div>
        <div class="single_2">
            <div class="prod_desc">
                <span class="pdt_name">{{pdt.name}}</span>
                <div class="pdt_details_2_col">
                    <span class="brand">Brand</span>
                    <span class="brand_name">{{pdt.brand}}</span>
                </div>
                <div class="pdt_details_2_col">
                    <span class="brand">Price</span>
                    <span class="brand_name">{{pdt.price}}</span>
                </div>
            </div>


        </div>
        <div class="single_3">
            <div class="quantity_sec">
                <label>Quantity</label>
                <br>
                <input placeholder="Quantity" type="number"  value=0>
            </div>
        </div>
        <div class="single_4">
                <input type="image" src="img/greyCart.png" alt="Submit" width="48" height="48" ng-show="true" />
        </div>
    </div>



</body>

</html>
index.js 

var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope) {
var imgPath = "img/";
 //add your $scope variable products here with below provided product details.    
});

Solution

index.js 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  var imgPath = "img/";
  $scope.products = [
    {
      name : "Happy Cycle",
      discount:"20%",
      price: "2500",
      brand : "Wheels",
      addedToCart:false,
      image : imgPath + "cycle.jpg",
      quantity:0
    },
    {
      name : "Kids Shoes",
      discount:"10%",
      price: "1460",
      brand : "Feel Good",
      addedToCart:false,
      image : imgPath + "shoes.jpg",
      quantity:0
    },
    {
      name : "Polo Baby Care Dress",
      discount:"20%",
      price: "2500",
      brand : "Super Hero",
      addedToCart:false,
      image : imgPath + "shirt.jpg",
      quantity:0
    }
  ];
});