I am facing an issue with filtering a form based on user input in a text box or selection from a dropdown list. The text box filter works fine individually, but when I try to combine it with the dropdown list selection, neither filter seems to work. Below is the HTML code:
<div class="row">
<table class="table" id="results">
<thead style="background-color:#003A5D; color:white">
<tr>
<td>Company Name</td>
<td>City</td>
<td>State</td>
<td>Company Type</td>
<td>System ID</td>
<td>Releast Status</td>
<td>Training Tracker</td>
<td>SSQ Complete</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="contractor in contractors | filter: search ">
<td id="companyname">{{contractor.vchCompanyName}}</td>
<td id="city">{{contractor.vchOprCity}}</td>
<td id="state">{{contractor.vchOprStateID}}</td>
<td id="companytype">{{contractor.CompanyType}}</td>
<td id="companyid">{{contractor.CompanyID}}</td>
<td id="status">{{contractor.ReleaseStatus}}</td>
<td>
<div ng-switch="contractor.TrainingTracker">
<div ng-switch-when="true">
<span style="color:green" ng-bind-html="contractor.TrainingTracker | applyMarks | trustedhtml"></span>
</div>
<div ng-switch-when="false"><span style="color:red" ng-bind-html="contractor.TrainingTracker | applyMarks | trustedhtml"></span></div>
</div>
</td>
<td>
<div ng-switch="contractor.SSQComplete">
<div ng-switch-when="true">
<span style="color:green" ng-bind-html="contractor.SSQComplete | applyMarks | trustedhtml"></span>
</div>
<div ng-switch-when="false"><span style="color:red" ng-bind-html="contractor.SSQComplete | applyMarks | trustedhtml"></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Here is the Angular Controller filter code:
$scope.search = function (row) {
return (angular.lowercase(row.vchCompanyName).indexOf($scope.query || '') !== -1 || angular.lowercase(row.CompanyID).indexOf($scope.query || '') !== -1 || row.CompanyType.indexOf($scope.query2 || '') !== -1);
};
To address this issue, I attempted to create a custom filter as follows:
app.filter('searchArrayFilter', [function () {
return function (rows, query, query2) { // your filter take an array, and two query as parameters
return rows.filter(function (row) {
return (angular.lowercase(row.vchCompanyName).indexOf(query || '') !== -1 || angular.lowercase(row.CompanyID).indexOf(query || '') !== -1 || row.CompanyType.indexOf(query2 || '') !== -1);
});
}
}])
I modified my HTML code to include the custom filter like this:
<tr ng-repeat="contractor in contractors | searchArrayFilter:query:query2 ">
However, now it requires selecting an option from the dropdown and entering text in the textbox simultaneously for the filter to work. This behavior is unexpected as I am using '||' OR operator, but it behaves like '&&' AND.
Any help or guidance on this matter would be highly appreciated!