last day (15 days later) » 

6:16 PM
0
A: Using local storage in angular to store which checkboxes were checked

brianvaughnUpdated response There's a couple of things going on in your codepen. Here's my recommendations: 1: Add a data attribute to your checkboxes: <input type="checkbox" name="filters" data-filter-by="Brand A" ng-click="includeBrand()"> Update your click-handler to be more like this: $("input[nam...

 
Should I be looking at something along the lines of $("input[name='filters']").val("checked", "checked"); Apologies, this is still my first endeavor with angular/local storage
 
Not sure what you were asking with this follow up, but I updated my response to show an example of what I meant in case it was unclear...
 
I inputed your line, and it 'inversed' my code? Now when I click to filter by brand a, it shows all brands b-z, and hides a?
 
inverted? I'm not sure what you're saying. Show a Plunker or something.
 
Here is my codepen If you look at it, when you click "Brand A" in the 'brands' drop down, it will hide the 'brand a' block.
 
6:16 PM
I understand now. Give me a few and I'll update my suggestion.
 
Alright, thanks for the help man, sorry I couldn't really explain it by typing lol
 
Hey. Was my updated example any more helpful?
I could update your Codepen if that would be easier.
 
well, I have tons of filters, was wondering if there was a way that i didn't need to ad "filter-by" into the html
 
Sure, sure
You can aslo use the text value.
It just seemed cleaner to use a data attribute.
I'll update my example momentarily.
I forked your Codepen for the moment to make sure it worked ;)
 
haha alright, I can do the data value, don't worry about updating
I got pulled onto a freelance gig for a friend, and I'm really good in html/css, not so hot in JS and angular. so this whole thing is being built of hopes, dreams, and alcohol lol
 
6:24 PM
lol
 
So this solution will work on all filters, not just brand ones?
 
Alright, so with datafilter in, it's till not saving
Looking at yours also, doesn't seem like the filter method is working either
 
Here's the deal
Your localStorage has data that needs to be cleared once before the example I posted works.
B'c what's in there now is not an Array (or valid JSON)
Also, I only added 'data-filter' to the first 4 checkboxes because I'm lazy :)
So I was only testing with Brands A-D
 
I have it added to all, so I can swap that out
should I just clear cache?
 
6:38 PM
Erg.. Codepen keeps erasing one of my hcanges too
Sorry I'm not familiar with codepen
I usually use Jsfiddle or Plunker
 
oops
refreshed cache and got logged out
 
I just saved it again and it looks like it got the change.
lols
Yeah, this should work for you once you've cleared your local storage - which you can do in Chrome's console
 
what's the code for the console?
 
Click on the "resources" tab then "local storage" then s.codepen.io
Then you can browse, modify, etc.
It's pretty handy :)
I'm at work so I'm a little distracted but I hope this helped.
It was kind of a funny exercise. :)
 
I got it, one more thing though
 
6:43 PM
Mhm
 
Does yours re filter the data on load? Mine just has the boxes checked, but nothing is filtered?
 
Ah, right. Nope I only made it check the boxes.
You could get the filtering to work too by adding an onchange event handler
Hm.. actually
That might not trigger, I think taht requires focus
Here's what you could do.
for (var i = 0, length = items.length; i < length; i++) {
includeBrand(items[i]);
}
Something along those lines, if you wanted to pre-initialize your filtering with the items that were in your localStorage.
 
So I would need to do that for every filter list?
brand, material, features, etc..
 
Nah,
This is a good opportunity to write a reusable class :)
That way you don't repeat the code that persists filters.
I was just showing you how the filters could be saved and re-read.
 
So I would need to call a class for "filtered" to check the boxes on load?
 
6:47 PM
If I were doing this
I'd probably write a function like...
function createFilterSet(checkboxExpression, changeCallback) {

// First off, read localStorage and precheck checkboxes that match $(checkboxeExpression)

// Next loop through $(checkboxExpression) and add onchange event handlers
// These handlers would update localStorage like we've been discussing
// These handlers could also call changeCallback() to notify of a filter change
};

createFilterSet('input[name="filters"]', includeBrand);
// ...
Does this make sense at all? :)
 
Haha, I'm not very good at JS, so no not really :I
 
This way you have 1 function that knows how to save and load filter state, and you just call it for each of your groups of checkboxes.
Hm. I have lunch in 5 minutes.
Let me take one quick pass
I won't have time to test ;)
 
haha alright man, I appreciate it. I'm at work to, but everyone's been checked out an hour ago lol.
I'll go accept your answer while you do that
 
function createFilterSet(checkboxSelector, localeStorageId, changeCallback) {
var items = localStorage.getItem(localeStorageId);
items = items ? JSON.parse(items) : [];

// Pre-select checkboxes that were selected when the user last visited
$(checkboxSelector).each(function(index, input) {
var data = $(input).data('filter-by');
if (items.indexOf(data) >= 0) {
$(input).attr('checked', 'checked');
}
});

// Listen for selection changes and update our saved filters
$(checkboxSelector).live('change', function () {
:) No problem. Good luck!
 
Thanks! I'll test it real quick
Is this in conjunction to the previous code or does it replace it?
 

last day (15 days later) »