Filter json file with tickboxes in Angular

I am trying to filter results from my JSON file so the user can click on ladies or mens ‘styles’, but some products have both a ladies and mens styles, so how would I be able to show the results for ‘both’ without having three tick boxes? I know I cannot have duplicate names in my JSON, but have done this just as an example for now. Any help would be appreciated. I have put my code here:

http://plnkr.co/edit/fXOZHqo48ntvsdJA875y?p=preview

<div ng-controller="myCtrl">
    <div ng-repeat="(prop, ignoredValue) in { 'category': true, 'cut': true }" ng-init="filter[prop]={}">
        <b>{{prop | capitalizeFirst}}:</b><br />
        <span class="quarter" ng-repeat="opt in getOptionsFor(prop)">
            <b><input type="checkbox" ng-model="filter[prop][opt]" />&nbsp;{{opt}}</b>
        </span>
        <hr />
    </div>
    <div ng-repeat="w in filtered=(products | filter:filterByProperties)">
        {{w.name}} ({{w.category}})
    </div>
    <hr />
    Number of results: {{filtered.length}}
</div>


Source: json

Leave a Reply