mercredi 25 février 2015

Angular / jQuery Checkbox Filter

I have inherited an Angular plugin (I have not worked with Angular before), it allows the user to filter a list of articles by category, without the page having to re-load. Each category filter is a checkbox.


I need to pass a URL ex: /?category=Employment to generate a pre-filtered page of corresponding articles.


I naively thought I could use jQuery to get the variable that has passed through the URL and update the article list by using jQuery to update the checkbox value to the URL variable.


Predictably I discovered this does not inform Angular to update the list items. How the devil do I move forward?


Code View: http://ift.tt/1zHo9KW


Example Checkbox Options:



<ul>
<li ng-repeat="(key, value) in item.alloption" class="parent-Corporate">
<input id="ws-is-checkbox-25" type="checkbox" ng-change="grabResult( this ,formData[item.taxonomy][key], item)" name="Corporate" ng-model="formData[item.taxonomy][key]" value="25" class="ng-pristine ng-valid"> Corporate
</li>
<li ng-repeat="(key, value) in item.alloption" class="parent-Employment">
<input id="ws-is-checkbox-26" type="checkbox" ng-change="grabResult( this ,formData[item.taxonomy][key], item)" name="Employment" ng-model="formData[item.taxonomy][key]" value="26" class="ng-pristine ng-valid"> Employment
</li>
</ul>


Example jQuery:



var getCat = "Corporate";

if( getCat ) {
// Check Which Category Option To Filter
var input = $('li.parent-'+ getCat +' input[type=checkbox]');
$(input).prop('checked', true);

// Get The Cat ID
var catID = $('li.parent-'+ getCat +' input[type=checkbox]').val();

// Get The Input Checkbox Value To Update Filter Items With
var newVal = $('#ws-is-checkbox-'+ catID).val();

// How To Update Update Filtered Items

}


I realise this is pretty vague, so apologies.


Thanks.





Aucun commentaire:

Enregistrer un commentaire