Link to JSFiddle for this issue: http://jsfiddle.net/ADukg/16368/.
I am attempting to create a filtering system for items in an ng-repeat list based on multiple criteria from the JSON properties of each object.
For example, when the 'Unread' filter is chosen, only items with the 'unread' property set to true should be displayed. Similarly, selecting the high importance filter should show items with the high importance property set to true.
My goal is to have the ability to combine these filters so that only items with both the unread and high importance properties set to true are shown when both filters are applied.
In the provided JSFiddle, I have set up basic models for the filter checkboxes. However, I am struggling with implementing the actual filtering logic for the list. Any guidance on how to achieve this specific scenario would be greatly appreciated.
HTML:
<div>
<label for="filterByAllCheckbox">Filter by All </label>
<input ng-model="filters.all" ng-change="filterByAll()" type="checkbox" id="filterByAllCheckbox" ng-disabled="filters.all">
</div>
<div>
<label for="filterByUnreadCheckbox">Filter by Unread </label>
<input ng-model="filters.unread" ng-change="manageFilters()" type="checkbox" id="filterByUnreadCheckbox">
</div>
<div>
<label for="filterByHighImportanceCheckbox">Filter by High Importance </label>
<input ng-model="filters.highImportance" ng-change="manageFilters()" type="checkbox" id="filterByHighImportanceCheckbox">
</div>
<br>
<ul>
<b>NOTIFICATIONS</b>
<li ng-repeat="notification in notifications">
{{notification.title}}
</li>
</ul>