How to Display All Products Using AngularJS: A Comprehensive Guide
☰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:
<span class="pln"> name</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Happy</span><span class="pln"> </span><span class="typ">Cycle</span><span class="pln"> discount</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20</span><span class="pun">%</span><span class="pln"> price</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2500</span><span class="pln"> brand</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Wheels</span><span class="pln"> image</span><span class="pun">:</span><span class="pln"> cycle</span><span class="pun">.</span><span class="pln">jpg quantity</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2</span>
Sample Code
index.htmlindex.js<span class="pln"> </span><span class="dec"><!DOCTYPE html></span><span class="pln"> </span><span class="tag"><html></span><span class="pln"> </span><span class="tag"><head></span><span class="pln"> </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/css"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"style.css"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"</span><span class="tag">></script></span><span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min.js"</span><span class="tag">></script></span><span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"index.js"</span><span class="tag">></script></span><span class="pln"> </span><span class="tag"></head></span><span class="pln"> </span><span class="tag"><body</span><span class="pln"> </span><span class="atn">ng-app</span><span class="pun">=</span><span class="atv">"myApp"</span><span class="pln"> </span><span class="atn">ng-controller</span><span class="pun">=</span><span class="atv">"myCtrl"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"topnav"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">float</span><span class="pun">:</span><span class="pln">right</span><span class="pun">;</span><span class="pln">font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">20px</span><span class="atv">"</span><span class="tag">><i></span><span class="pln">Check out</span><span class="tag"></i></a></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">float</span><span class="pun">:</span><span class="pln">right</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">20px</span><span class="atv">"</span><span class="tag">><i></span><span class="pln">Sign In</span><span class="tag"></i></a></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#/Home"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">float</span><span class="pun">:</span><span class="pln">left</span><span class="pun">;</span><span class="pln"> width</span><span class="pun">:</span><span class="lit">150px</span><span class="pun">;</span><span class="atv">"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"active"</span><span class="tag">><b><i></span><span class="pln">Pick2get</span><span class="tag"></i></b></a></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><br</span><span class="pln"> </span><span class="tag">/></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"search_drop_down"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><select</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"month"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"select select-styled"</span><span class="pln"> </span><span class="tag">></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"hide"</span><span class="tag">></span><span class="pln">-- Brand --</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">ng-repeat</span><span class="pun">=</span><span class="atv">"pdt in products"</span><span class="pln"> </span><span class="tag">></span><span class="pln">{{pdt.brand}}</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"></select></span><span class="pln"> </span><span class="tag"><select</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"year"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"select select-styled"</span><span class="pln"> </span><span class="tag">></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"hide"</span><span class="tag">></span><span class="pln">-- Price --</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"low_price_to_high"</span><span class="tag">></span><span class="pln">Low Price to High</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"hign_price_to_low"</span><span class="tag">></span><span class="pln">High Price to Low</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"></select></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"search"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"Search"</span><span class="pln"> </span><span class="atn">size</span><span class="pun">=</span><span class="atv">"40"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"product_box"</span><span class="pln"> </span><span class="atn">ng-repeat</span><span class="pun">=</span><span class="atv">"pdt in products"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"single_1"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"discount"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"discount_badge"</span><span class="tag">></span><span class="pln">{{pdt.discount}}</span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"discount_text"</span><span class="tag">></span><span class="pln">Discount</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"img/dummy_product.jpg"</span><span class="pln"> </span><span class="tag">/></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"single_2"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"prod_desc"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pdt_name"</span><span class="tag">></span><span class="pln">{{pdt.name}}</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pdt_details_2_col"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"brand"</span><span class="tag">></span><span class="pln">Brand</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"brand_name"</span><span class="tag">></span><span class="pln">{{pdt.brand}}</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pdt_details_2_col"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"brand"</span><span class="tag">></span><span class="pln">Price</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"brand_name"</span><span class="tag">></span><span class="pln">{{pdt.price}}</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"single_3"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"quantity_sec"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><label></span><span class="pln">Quantity</span><span class="tag"></label></span><span class="pln"> </span><span class="tag"><br></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"Quantity"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"number"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">0</span><span class="tag">></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"single_4"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"image"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"img/greyCart.png"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Submit"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"48"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"48"</span><span class="pln"> </span><span class="atn">ng-show</span><span class="pun">=</span><span class="atv">"true"</span><span class="pln"> </span><span class="tag">/></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></body></span><span class="pln"> </span><span class="tag"></html></span>
<span class="pln"> </span><span class="kwd">var</span><span class="pln"> app </span><span class="pun">=</span><span class="pln"> angular</span><span class="pun">.</span><span class="kwd">module</span><span class="pun">(</span><span class="str">'myApp'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[]);</span><span class="pln"> app</span><span class="pun">.</span><span class="pln">controller</span><span class="pun">(</span><span class="str">'myCtrl'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">$scope</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> imgPath </span><span class="pun">=</span><span class="pln"> </span><span class="str">"img/"</span><span class="pun">;</span><span class="pln"> </span><span class="com">//add your $scope variable products here with below provided product details. </span><span class="pln"> </span><span class="pun">});</span>
Solution
index.js<span class="pln"> </span><span class="kwd">var</span><span class="pln"> app </span><span class="pun">=</span><span class="pln"> angular</span><span class="pun">.</span><span class="kwd">module</span><span class="pun">(</span><span class="str">'myApp'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[]);</span><span class="pln"> app</span><span class="pun">.</span><span class="pln">controller</span><span class="pun">(</span><span class="str">'myCtrl'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">$scope</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> imgPath </span><span class="pun">=</span><span class="pln"> </span><span class="str">"img/"</span><span class="pun">;</span><span class="pln"> $scope</span><span class="pun">.</span><span class="pln">products </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> name </span><span class="pun">:</span><span class="pln"> </span><span class="str">"Happy Cycle"</span><span class="pun">,</span><span class="pln"> discount</span><span class="pun">:</span><span class="str">"20%"</span><span class="pun">,</span><span class="pln"> price</span><span class="pun">:</span><span class="pln"> </span><span class="str">"2500"</span><span class="pun">,</span><span class="pln"> brand </span><span class="pun">:</span><span class="pln"> </span><span class="str">"Wheels"</span><span class="pun">,</span><span class="pln"> addedToCart</span><span class="pun">:</span><span class="kwd">false</span><span class="pun">,</span><span class="pln"> image </span><span class="pun">:</span><span class="pln"> imgPath </span><span class="pun">+</span><span class="pln"> </span><span class="str">"cycle.jpg"</span><span class="pun">,</span><span class="pln"> quantity</span><span class="pun">:</span><span class="lit">0</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> name </span><span class="pun">:</span><span class="pln"> </span><span class="str">"Kids Shoes"</span><span class="pun">,</span><span class="pln"> discount</span><span class="pun">:</span><span class="str">"10%"</span><span class="pun">,</span><span class="pln"> price</span><span class="pun">:</span><span class="pln"> </span><span class="str">"1460"</span><span class="pun">,</span><span class="pln"> brand </span><span class="pun">:</span><span class="pln"> </span><span class="str">"Feel Good"</span><span class="pun">,</span><span class="pln"> addedToCart</span><span class="pun">:</span><span class="kwd">false</span><span class="pun">,</span><span class="pln"> image </span><span class="pun">:</span><span class="pln"> imgPath </span><span class="pun">+</span><span class="pln"> </span><span class="str">"shoes.jpg"</span><span class="pun">,</span><span class="pln"> quantity</span><span class="pun">:</span><span class="lit">0</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> name </span><span class="pun">:</span><span class="pln"> </span><span class="str">"Polo Baby Care Dress"</span><span class="pun">,</span><span class="pln"> discount</span><span class="pun">:</span><span class="str">"20%"</span><span class="pun">,</span><span class="pln"> price</span><span class="pun">:</span><span class="pln"> </span><span class="str">"2500"</span><span class="pun">,</span><span class="pln"> brand </span><span class="pun">:</span><span class="pln"> </span><span class="str">"Super Hero"</span><span class="pun">,</span><span class="pln"> addedToCart</span><span class="pun">:</span><span class="kwd">false</span><span class="pun">,</span><span class="pln"> image </span><span class="pun">:</span><span class="pln"> imgPath </span><span class="pun">+</span><span class="pln"> </span><span class="str">"shirt.jpg"</span><span class="pun">,</span><span class="pln"> quantity</span><span class="pun">:</span><span class="lit">0</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">];</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span>
No Questions Data Available.
No Program Data.