I have developed a factory named SelectedProduct which is responsible for storing data from ProductDetailCtrl and fetching it in ProductOrder Ctrl
Below is the implementation of the factory:
.factory('SelectedProduct',function(){
var products = {};
return{
addCategory: function(_category){
return products.category = {category: _category};
},
addSelectedProduct: function(_name, _image, _quantity, _price){
return products.item = {name: _name, image: _image, quantity: _quantity, price: _price};
},
getSelectedProduct: function(){
return products.item;
},
getCategory:function(){
return products.category
}
}
})
In my product_detail.html file, I save the parameters using ng-click as follows:
<img ng-src="{{product.image}}" alt="{{product.product_name}}" ng-click="SelectImage((detail.image = product.image),(detail.name = product.product_name),(detail.quantity = product.quantity),(detail.price = product.price))" width="500" height="340">
In ProductDetailCtrl:
SelectedProduct.addCategory($stateParams.categoryName);
$scope.SelectImage = function () {
SelectedProduct.addSelectedProduct($scope.detail.name,$scope.detail.image,$scope.detail.quantity,$scope.detail.price);
};
Subsequently, I display the saved data in product_order.html:
<h3>RM {{selectedProduct.price}}</h3>
My ProductOrderCtrl:
$scope.selectedProduct = SelectedProduct.getSelectedProduct();
var categoryName = SelectedProduct.getCategory();
However, there seems to be an issue with displaying the output on Chrome browser. The functionality works fine on other devices and browsers. I am puzzled as to why this discrepancy exists. Any insights or suggestions regarding this problem?
Note: The name and image link work correctly in Chrome, but the price shown in '00.00' format cannot be displayed. The price is fetched from an online MySQL database and stored as varchar.
Result in Chrome
https://i.sstatic.net/tGbwx.png
https://i.sstatic.net/ymHjb.png
Result in Firefox