So I am trying to calculate the discount price applied on items/products, based off of two variables: the Retail Price and the Sales Price.
I created a function inside my AngularJS Service, called calculateDiscount, and I would like to return the calculated value on my view. My issue is that my view doesn't get updated with the calculated discount percentage for each item
Below is my code
HTML Markup:
<div class="articleItem swiper-slide" ng-repeat=
"item in items | orderBy:'-likes'">
<div class="sales-discount">
<i class="icon-tag"></i> Save {{calculateDiscount(item)}}%
</div>
<div class="article-title">
<span class="badge badge-rect-white">Bestseller</span>
<span class="badge badge-rect-black">On sale</span>
<h2 style=
"font-family: 'Lato', Arial, Tahoma, sans-serif; font-size: 26px; margin: 0; line-height: 1.2; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8); font-weight:900;">
<a href="javascript:;" style=
"color:#fff;">{{item.productName}}</a>
</h2>
<div class="shop-data" style="margin-top:10px;">
<!--<span class="shop-price" style="font-weight:900;
background-color: rgb(62, 123, 42);
padding: 5px;
border-radius: 3px;
color: #fff;">
{{item.price}}
</span>-->
<span class="shop-price" style=
"font-weight:900; background-color: rgb(62, 123, 42); padding: 5px; border-radius: 3px; color: #fff;">
{{item.saleprice}}</span> <span class="data"><span style=
"font-weight:900"><input id="box1" ng-model="item.likes"
ng-value="item.likes" type="checkbox"> <label for="box1"
style=
"padding: 5px; background-color: #222; position: relative; top: 0; border-radius: 3px; margin-right:5px;">
{{item.likes}}</label> <input id="box2" ng-model=
"item.comments" ng-value="item.comment_count" type=
"checkbox"> <label for="box2" style=
"padding: 5px; background-color: #222; position: relative; top: 0; border-radius: 3px; margin-right:5px;">
{{item.comment_count}}</label> <input id="box3" ng-model=
"item.shares" ng-value="item.share_count" type="checkbox">
<label for="box3" style=
"padding: 5px; background-color: #222; position: relative; top: 0; border-radius: 3px; margin-right:5px;">
{{item.share_count}}</label></span></span>
</div>
</div><img alt="" class="itemImgStyler" ng-src="{{item.picture}}"
style="width:100%;">
</div>
Sample Data in data.json
[
{
"_id": "5702bdbce518778bbc5add77",
"index": 1,
"guid": "694aafa9-b641-478a-a258-c2f0989f20dc",
"isOnsale": true,
"price": "$439.53",
"saleprice": "$22.73",
"picture": "https://s-media-cache-ak0.pinimg.com/564x/d7/24/f2/d724f20fb401e010d601842584b5419f.jpg",
"review": 4,
"size": "L",
"brand": "GUESS",
"productType": "BEAUTY",
"category": "SWEATERS",
"productName": "Guess Men's Grey Sweater Two-Tones",
"company": "LUXURIA",
"phone": "+1 (842) 527-3928",
"address": "674 Autumn Avenue, Haena, Massachusetts, 471",
"likes": 34,
"comment_count": 6,
"share_count":20,
"description": "Eu exercitation labore sint laborum nisi consequat pariatur sunt. Ullamco sit dolor velit ea excepteur cupidatat amet id Lorem anim enim consectetur ipsum eu. Laboris Lorem id exercitation occaecat irure aliquip veniam in ut. Esse velit occaecat cillum fugiat mollit ullamco do non cupidatat nulla ea esse aliquip cupidatat. Consectetur duis laborum fugiat laboris. Adipisicing fugiat dolor velit incididunt. Fugiat nisi dolor consequat amet et sint et aliquip qui consectetur.",
"comments": "Non et elit ullamco est officia in. Velit ut nisi sunt mollit. Adipisicing est amet ipsum anim. Sunt aliquip irure aliqua non labore ut nulla.\n\nIrure fugiat ullamco enim elit sunt exercitation nisi. Ex consequat amet velit do ea veniam Lorem anim ipsum dolore ipsum aliqua culpa irure. Mollit irure aliquip ad elit ut consectetur proident amet et veniam nulla deserunt cupidatat culpa. Do duis sit elit voluptate fugiat anim ad id irure. Deserunt amet veniam nisi non.",
"registered": "Sunday, November 2, 2014 12:41 PM",
"latitude": "-6.226487",
"longitude": "-111.623657",
"tags": [
7,
"consequat qui"
],
"range": [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9
],
"friends": [
3,
{
"id": 1,
"name": "Webb Rodriguez"
}
]
},
{
"_id": "5702bdbc1406dffa4188cc24",
"index": 2,
"guid": "27c7292b-a6a7-4145-afba-def743043941",
"isOnsale": true,
"price": "$422.14",
"saleprice": "$95.89",
"picture": "https://s-media-cache-ak0.pinimg.com/564x/b0/4c/35/b04c353ddf167ad87b19fab56aa16ac3.jpg",
"review": 3,
"size": "XXL",
"brand": "NIKE",
"productType": "SNEAKERS",
"category": "SHOES",
"productName": "NIKE Men's Shoes Two-Tones",
"company": "ZENTILITY",
"phone": "+1 (827) 471-2811",
"address": "650 Clifton Place, Keyport, Pennsylvania, 9913",
"likes": 458,
"comment_count": 149,
"share_count":82,
"description": "Cillum consectetur ut cupidatat officia ex elit aliqua. Quis nisi officia deserunt sit cillum commodo consectetur pariatur eu voluptate mollit qui magna. Culpa sunt qui nulla sit esse fugiat fugiat deserunt culpa.",
"comments": "Mollit commodo dolore sit nulla. Ea excepteur cillum in ullamco. Laborum ea laboris voluptate anim laboris elit consectetur elit cillum.\n\nLabore esse laboris occaecat laboris. Velit exercitation in qui exercitation aliqua in qui. Consectetur reprehenderit culpa culpa exercitation commodo cupidatat consequat laborum reprehenderit non aliqua voluptate labore id. Deserunt dolor voluptate aliquip aliqua elit nulla id veniam laborum veniam aute magna minim. Ut non eiusmod qui cupidatat elit. Pariatur laboris duis ea qui in minim sit. Ut nostrud ex deserunt proident.",
"registered": "Sunday, June 22, 2014 12:32 AM",
"latitude": "-52.134773",
"longitude": "77.284837",
"tags": [
7,
"consequat qui"
],
"range": [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9
],
"friends": [
3,
{
"id": 1,
"name": "Webb Rodriguez"
}
]
}
]
DataService
(function (ng) {
'use strict';
angular.module('data.services', [ ])
.factory('dataService', ['$http', function($http) {
console.log('dataService');
var urlBase = "main-services/data.json";
var calculateDiscount;
var dataItems = {};
dataItems.getAllItems = function () {
return $http.get(urlBase,{
cache:true
});
};
dataItems.addNewItem = function (item) {
return $http.post(urlBase+'/addNewItem', item);
};
calculateDiscount = function(item){
return ((item.saleprice/item.price)*100);
}
return dataItems;
}]);
}(angular));
I think, you get items in some controller's method something like this:
dataService.getAllItems()
.then(function(response){$scope.items = response.data;})
If it's so, you could change your getAllItems method like this:
dataItems.getAllItems = function () {
return $http.get(urlBase,{
cache:true
})
.then(function(response){
var items = response.data;
items.forEach(function(item){
item.discount = calculateDiscount(item);
})
return items;
});
};
And, then, in your html, replace <i class="icon-tag"></i> Save {{calculateDiscount(item)}}% with <i class="icon-tag"></i> Save {{item.discount}}%.
I didn't check this code for work, there may be some syntax errors, but it reflects conception