Scribd
Upload
503 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
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
503 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
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