I have a problem with remove and edit cookie object from $cookies in angularjs. I want to make a shop and I am adding products to $cookies global variable with putObject function (I didn't use put because I have more than one argument). I want to add function to remove and edit product from shop and remove and edit only one object from cookie. Please help me!
Here is a fragment of my code (I want to remove/edit object from 'products' cookie):
app.controller('Store', ['$scope', '$cookies', 'x2js', '$http',
function($scope, $cookies, x2js, $http){
this.products = $cookies.getObject('products');
if(!this.products) {
var self = this;
$http.get('assets/xml/products.xml').success(function(data) {
self.products = data.products.product;
for(var i = 0; i < self.products.length; i++) {
self.products[i].id = parseInt(self.products[i].id);
self.products[i].netto = self.products[i].netto + '.00';
self.products[i].tax = parseInt(self.products[i].tax);
self.products[i].brutto = parseFloat(self.products[i].brutto);
self.products[i].rating = parseInt(self.products[i].rating);
};
});
}
$scope.product = $cookies.getObject('product') || {};
$scope.$watch('product', function() {
$cookies.putObject('product', $scope.product);
}, true);
this.addProduct = function() {
if(this.countCategories() >= 2) {
if(this.validateForm()) {
var product = {
id: this.products.length + 1,
name: $scope.product.name,
code: $scope.product.code,
image: $scope.product.image,
netto: this.intToFloat($scope.product.netto, 2),
tax: $scope.product.tax,
brutto: this.calculatePriceBr(),
rating: parseInt(this.ratingChecked()),
category: this.categoryChecked(),
option: this.optionChecked(),
selected: $scope.product.selected
};
this.products.push(product);
$scope.product = {};
$cookies.putObject('products', this.products);
$('#product-add').modal('hide');
return true;
} else {
return;
}
} else {
return;
}
};
})();
Hope this is what you are looking for.
I've made a little test based on your code (simplified):
var app = angular.module('myApp', ['ngCookies']);
app.controller('Store', Store);
Store.$inject = ['$scope', '$cookies', '$http'];
function Store($scope, $cookies, $http) {
var vm = this;
vm.products = [];
vm.cart = [] ;
vm.inCookie =[];
$http.get('products.xml').success(function(data) {
vm.products = data;
for (var i = 0; i < vm.products.length; i++) {
vm.products[i].id = parseInt(vm.products[i].id);
vm.products[i].netto = vm.products[i].netto + '.00';
vm.products[i].tax = parseInt(vm.products[i].tax);
vm.products[i].brutto = parseFloat(vm.products[i].brutto);
vm.products[i].rating = parseInt(vm.products[i].rating);
};
});
this.addProduct = function(row) {
vm.cart.push(row);
$cookies.put('cart', JSON.stringify(vm.cart));
vm.inCookie = JSON.parse($cookies.get('cart'));
};
}
You can see here how to add and retrieve data from a cookie.
In this plunkr you can see it working.
https://plnkr.co/edit/ew1ePjzbMxjAqtgx8hzq?p=preview
Hope this helps.
Regards!
Related
I currently put my constants on the $scope. I don't feel like this is the best way to do it as anyone can access the scope with their JS console.
What is the best method to define constants in Angular?
var app = angular.module('app', []);
app.controller('calculatorController', function($scope) {
$scope.values = [];
$scope.CONSTANTS = {
ERROR_MESSAGES: {
NOT_INTEGER: "One of the values input was not a number!"
}
};
$scope.add = function () {
var calculatedValue = 0;
for (var i = 0; i <= $scope.values; i++) {
if (typeof $scope.values[i] === 'string' || $scope.values[i] instanceof String) {
alert($scope.CONSTANTS.ERROR_MESSAGES.NOT_INTEGER);
}
calculatedValue += $scope.values[i];
}
return calculatedValue;
}
});
Just make it a variable within the controller callback (or a const if using TypeScript or ES2015+ JavaScript):
var app = angular.module('app', []);
app.controller('calculatorController', function($scope) {
var ERROR_MESSAGES = {
NOT_INTEGER: "One of the values input was not a number!"
};
$scope.values = [];
$scope.add = function () {
var calculatedValue = 0;
for (var i = 0; i <= $scope.values; i++) {
if (typeof $scope.values[i] === 'string' || $scope.values[i] instanceof String) {
alert(ERROR_MESSAGES.NOT_INTEGER);
}
calculatedValue += $scope.values[i];
}
return calculatedValue;
}
});
(Though that particular kind of constant should probably be loaded from somewhere...)
If you want all the constants at one place, another way is to declare constants as below .
var app = angular.module('app', []);
angular.module('AppName').constant('versionConstant', {
"versionNum":"1.22"
});
// And inject them in your controller
angular.module(AppName).controller(ControllerName, ['$scope','versionConstant',
function ($scope, versionConstant) {
var version=versionConstant.versionNum;
});
I created an application where I have controller and factory. I have an array inside of the factory where I want to push id of the element to this array. However, when I am trying to push element to array I got an error that
"favorites.push is not a function"
Below you can find my controller and factory. Thank you for reading:
Factory:
.factory('favoriteFactory',['$resource', 'baseURL','$localStorage', function ($resource, baseURL, $localStorage) {
var favFac = {};
var favorites = $localStorage.get('favorites', []);
favFac.addFavorites = function (index) {
for(var i=0; i<favorites.length; i++){
if(favorites[i].id == index)
return
}
favorites.push({id: index});
$localStorage.storeObject('favorites',favorites)
}
favFac.deleteFromFavorites = function (index) {
for (var i = 0; i < favorites.length; i++) {
if (favorites[i].id == index) {
favorites.splice(i, 1);
}
}
$localStorage.storeObject('favorites', favorites)
};
favFac.getFavorites = function () {
return $localStorage.getObject('favorites',[]);
};
return favFac
}])
Controller:
.controller('MenuController', ['$scope', 'menuFactory', 'favoriteFactory','baseURL', '$ionicListDelegate', 'dishes', '$localStorage',
function($scope, menuFactory,favoriteFactory, baseURL, $ionicListDelegate, dishes, $localStorage) {
$scope.baseURL = baseURL;
$scope.tab = 1;
$scope.filtText = '';
$scope.showDetails = false;
$scope.showMenu = true;
$scope.message = "Loading ...";
$scope.addFavorite = function (index) {
console.log("index:" +index);
favoriteFactory.addFavorites(index);
$ionicListDelegate.closeOptionButtons();
};
$scope.dishes = dishes;
$scope.select = function(setTab) {
$scope.tab = setTab;
if (setTab === 2) {
$scope.filtText = "appetizer";
}
else if (setTab === 3) {
$scope.filtText = "mains";
}
else if (setTab === 4) {
$scope.filtText = "dessert";
}
else {
$scope.filtText = "";
}
};
$scope.isSelected = function (checkTab) {
return ($scope.tab === checkTab);
};
$scope.toggleDetails = function() {
$scope.showDetails = !$scope.showDetails;
};
}])
I assume you are using ngStorage. The get method does not have a second parameter. Therefore, your attempt at returning a default value of [](empty array) is simply returning undefined and then you are attempting to push to undefined and not to an array.
The source code for ngStorage shows no second parameter for get:
https://github.com/gsklee/ngStorage/blob/master/ngStorage.js
So this line:
var favorites = $localStorage.get('favorites', []);
Should be this:
var favorites = $localStorage.get('favorites') || [];
I need to inject some piece of code into a function, to prevent DRY. Here is an example of my code.
angular.module('crypt', ['ui.chart'])
.controller('MainCtrl', ['$http', function($http) {
var self = this;
self.encrypt = function() {
$http.post('/encrypt',
{'crypt': {'text': self.plain, 'shift':self.rot}})
.then(function(response) {
self.encrypted = response.data.encrypted;
self.plain = '';
// reusable function goes here
// var frequencyArr = response.data.frequency;
// var frequencyArrLength = frequencyArr.length;
// if (frequencyArrLength) self.cryptChart = [frequencyArr];
});
};
self.decrypt = function() {
$http.post('/decrypt',
{'crypt': {'text': self.encrypted, 'shift':self.rot}})
.then(function(response) {
self.plain = response.data.plain;
self.encrypted = '';
// and here
// the stuff to become a function
var frequencyArr = response.data.frequency;
var frequencyArrLength = frequencyArr.length;
if (frequencyArrLength) self.cryptChart = [frequencyArr];
});
};
// ...
}])
So how do I pack that 3 lines and make a reusable function in Angular way?
Maybe like this:
angular.module('crypt', ['ui.chart'])
.controller('MainCtrl', ['$http', function($http) {
var self = this;
function cryption(decrypt, callBack) {
$http.post(
decrypt ? '/decrypt' : '/encrypt',
{crypt: {text: decrypt ? self.encrypted : self.plain, shift: self.rot }})
.then(callBack);
}
function cryptChart(response) {
var frequencyArr = response.data.frequency;
var frequencyArrLength = frequencyArr.length;
if (frequencyArrLength) // can be simplyfied to response.data.frequency.length
self.cryptChart = [frequencyArr];
}
self.encrypt = cryption(false, function(response) {
self.encrypted = response.data.encrypted;
self.plain = '';
cryptChart(response);
});
self.decrypt = cryption(true, function(response) {
self.plain = response.data.plain;
self.encrypted = '';
cryptChart(response);
});
// ...
}])
I went bit further and extracted the shared $http.post call into function as well.
I am trying to clean up a controller that has too many lines of code in it. In the controller below where you find a function called getProductDetails, I would like to move the filter to a factory or a service, but I am not sure how to do it.
'use strict';
(function () {
var userQuoteBuild = angular.module('priceApp');
userQuoteBuild.controller('quoteBuilderController', function ($scope, $http) {
// loads of controller logic here...
$scope.getProductDetails = function (item) {
$scope.listOfProductVariants = item.default_variant_attributes;
// TODO: put this in its own factory?
$scope.selectedProductAttributes = $scope.listOfAttributes.filter(function (item) {
var validated = false, i, length = $scope.listOfProductVariants.length;
for (i = 0; i < length; i++) {
if (item.name === $scope.listOfProductVariants[i]){
validated = true;
}
}
return validated;
});
};
});
(function () {
'use strict';
angular
.module('priceApp')
.factory('filterService', filterService);
function filterService() {
var service = {
getValidated: getValidated
}
return service;
function getValidated(list, variants) {
return list.filter(function (item) {
var validated = false, i, length = variants.length;
for (i = 0; i < length; i++) {
if (item.name === variants[i]) {
validated = true;
}
}
return validated;
});
}
}
})();
Simply inject this filterService to your controller and then use it as in example here:
$scope.selectedProductAttributes = filterService
.getValidated($scope.listOfAttributes,
$scope.listOfProductVariants)
I followed John Papa's AngularJS Style Guide. Make sure to choose a better name than filterService. : )
Check this:
userQuoteBuild.factory('myService', function() {
var service = {
getProductDetails: function(item) {
// your logic
return value;
}
}
return service;
});
I declare $scope.something in my controller like
app.controller('MainControl', function($scope){
$scope.something = 1;
});
then how can I access it in my filter scope? like
app.filter("myCustomFilter", function () {
// here
});
obviously it doesn't work if I just $scope.something there.
After a chat here is the working solution http://jsbin.com/juxebewu/4/edit
<div ng-controller="sCtr">
<ul>
<li>{{aa | friends:this}}</li></ul>{{showItem}}
<p ng-show="showItem">click</p>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
var app = angular.module('App', []);
var targetOfFriendTasks = 1;
var user = [];
user[0]= {uId: 1};
app.filter("friends", function () {
return function (input, s) {
var output = [];
for (var i in input) {
if (input[i].name.length >= 1 && input[i].uId == targetOfFriendTasks) {
output.push(input[i]);
}
}
if (targetOfFriendTasks != user[0].uId) {
return output;
} else {
s.showItem = true;
}
};
});
app.controller('sCtr', function ($scope) {
$scope.aa = [{name:"lorem", uId:1}, {name:"ipsum", uId:2}];
$scope.showItem = false;
});