I am tasked with implementing a filter feature using checkboxes for certain properties. Here is the code I have written:
JavaScript code:
app.controller("filterCtrl", function ($scope, $http) {
$http({
method: 'GET',
url: contextPath + '/properties'
})
.then(function (response) {
var properties = response.data.properties;
var propertyFilters = response.data.filters;
$scope.properties = properties;
$scope.propertyFilters = propertyFilters;
$scope.usePropertyGroups = {};
$scope.usePropertyTypes = {};
$scope.usePropertyStates = {};
$scope.$watch(function () {
return {
properties: $scope.properties,
usePropertyGroups: $scope.usePropertyGroups,
usePropertyTypes: $scope.usePropertyTypes,
usePropertyStates: $scope.usePropertyStates
}
}, function (value) {
var filterType = [
{selected : $scope.usePropertyGroups, filterProp : 'propertyGroups'},
{selected : $scope.usePropertyTypes, filterProp : 'propertyTypes'},
{selected : $scope.usePropertyStates, filterProp : 'states'}
];
var filteredProps = $scope.propertyVOs;
for(var i in filterType){
filteredProps = filterData(filteredProps, filterType[i].selected, filterType[i].filterProp);
}
$scope.filteredProps = filteredVOs;
}, true);
});
})
var filterData = function(allData,selectedProps,equalData){
var afterFilter = [];
var selected = false;
for (var j in allData) {
var p = allData[j];
for (var i in selectedProps) {
if (selectedProps[i]) {
selected = true;
if (i == p[equalData]) {
afterFilter.push(p);
break;
}
}
}
}
if (!selected) {
afterFilter = allData;
}
return afterFilter;
};
HTML:
<div data-ng-controller="filterCtrl">
<div>
<table>
<thead>
<tr>
<th>property ID</th>
<th>property name</th>
<th>property description</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="vo in filteredProps">
<td>{{vo.id}}</td>
<td>{{vo.name}}</td>
<td>{{vo.description}}</td>
</tr>
</tbody>
</table>
</div>
<div>
<div class="filter-list-container">
<ul data-ng-repeat="(key,value) in propertyFilters.filterOfGroup">
<li><input type="checkbox" data-ng-model="usePropertyGroups[key]"/>{{key}}<span> ({{value}})</span></li>
</ul>
</div>
<div class="filter-list-container">
<ul data-ng-repeat="(key,value) in propertyFilters.filterOfType">
<li><input type="checkbox" data-ng-model="usePropertyTypes[key]"/>{{key}}<span> ({{value}})</span></li>
</ul>
</div>
<div class="filter-list-container">
<ul data-ng-repeat="(key,value) in propertyFilters.filterOfStates">
<li><input type="checkbox" data-ng-model="usePropertyStates[key]"/>{{key}}<span> ({{value}})</span></li>
</ul>
</div>
</div>
I have set up filters for property groups, types, and states. When a user selects a checkbox, the table displays related properties. The challenge I'm facing is that when multiple checkboxes are selected, only the previously filtered items are shown instead of filtering the entire array of properties. I've tried various approaches in the controller without success. Any assistance would be greatly appreciated. I found a similar example on this link. In that example, selecting one filter each from "Pant Size" and "Shirt Size" only shows matched items instead of all items.