Scribd
Upload
527 views

Angular Sort

This document defines an AngularJS application for an e-commerce site. The application displays a product listing that allows sorting and filtering products by brand, price, and search term. It includes dropdowns for brand and price filtering, an input field for search, and a quantity input and add to cart button for each product. Products can be added to the cart, which is tracked using a scope variable. The application code defines products, filters, and an add to cart function to add interactivity.

Uploaded by

Aishwarya Nayak
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
527 views

Angular Sort

This document defines an AngularJS application for an e-commerce site. The application displays a product listing that allows sorting and filtering products by brand, price, and search term. It includes dropdowns for brand and price filtering, an input field for search, and a quantity input and add to cart button for each product. Products can be added to the cart, which is tracked using a scope variable. The application code defines products, filters, and an add to cart function to add interactivity.

Uploaded by

Aishwarya Nayak
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

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">
<!--
Create drop down for brand
bind the value to 'searchKeyword'
Initialize the id as "brandSelection"
-->
<select id="brandSelection" value="searchKeyword" class="select select-styled"
ng-model="getBrand">
<option value="hide">-- Price --</option>
<option ng-repeat="pdt in products"
value="{{pdt.brand}}">{{pdt.brand}}</option>
</select>

<!--
Create drop down for price
Bind the value to 'selectedPriceFilter'
Call the function 'selectPriceFilter()' on select change
-->
<select id="selectedPriceFilter" value="selectedPriceFilter" class="select
select-styled" ng-model="selectedPriceFilter" ng-
change="selectedPriceFilter(getPriceOption)">
<option ng-repeat="option in options">{{option}}</option>
</select>

<!--
Create a input field for Search
Bind the input value to 'searchKeyword'
Initialize id and class as "search"
-->
<input class="search" id="search" value="searchKeyword"
placeholder="Search" size="40" type="text" ng-model="searchText">

</div>
<!--Use AngularJS sorting / searching features for the Product list-->
<!--Product List -->
<div class="product_box" id="product-list" ng-repeat="pdt in products |
filter:search | orderBy:getPriceOption | filter:getBrand">
<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 ng-src="{{pdt.image}}" />
</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 brdName">{{pdt.brand}}</span>
</div>
<div class="pdt_details_2_col">
<span class="brand">Price</span>
<span class="brand_name prdPrice">{{pdt.price}}</span>
</div>
</div>

</div>
<div class="single_3">
<div class="quantity_sec">
<label>Quantity</label>
<br>
<input placeholder="Quantity" type="number" ng-
model="pdt.quantity">
</div>
</div>
<div class="single_4">
<input type="image" src="img/greyCart.png" alt="Submit" width="48"
height="48"
ng-show="pdt.quantity<1?true:false" />
<input type="image" src="img/orangeCart.png" alt="Submit" width="48"
height="48"
ng-hide="pdt.quantity<1?true:false" ng-click="addToCart();" />
</div>
</div>
<!--Product List End-->

</body>

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

];
$scope.addToCart = function () {
alert('Product Added to Cart successfully')
return "success";
}
//create scope variable options that has 'Low Price to High' and 'High Price
to Low' values.
//add selectPriceFilter function that assign scope priceFilter to true /
false based on condition
$scope.option=['Low Price to High','High Price to Low'];
$scope.priceFilter=false;
$scope.search=function(pdt){
if($scope.searchText==undefined){
return true;
} else {
if(pdt.brand.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1
|| pdt.name.toLowerCase().indexOf($scope.searchText.toLowerCase()) != -1) {
return true;
}
}
return false;
}
$scope.selectPriceFilter=function(getPriceOption) {
if(getPriceOption==$scope.options[0]) {
$scope.selectedPriceFilter = true;
} else {
$scope.getPriceOption='-price';

$scope.selectedPriceFilter=false;
}

});

You might also like