When working with AngularJS, I encountered an issue while filtering a list of objects using ng-repeat:
<tr ng-repeat="application in page.applications | filter: {DisplayName:page.ApplicationSearchValue}">
{{application.DisplayName}}
</tr>
If the user enters an exclamation point as the first character in the search box, Angular interprets it as a negation symbol. For example, !MyApplication would return all applications except for MyAppliction.
I attempted to use a custom function as described in the Angular documentation for filter, but the exclamation point was not passing through to the function.
Upon investigating the source code of AngularJS at this link, I discovered that the code specifically treats the exclamation point differently:
function deepCompare(actual, expected, comparator, matchAgainstAnyProp, dontMatchWholeObject) {
var actualType = getTypeForFilter(actual);
var expectedType = getTypeForFilter(expected);
if ((expectedType === 'string') && (expected.charAt(0) === '!')) {
return !deepCompare(actual, expected.substring(1), comparator, matchAgainstAnyProp);
.....
To address this issue, my current workaround involves modifying the filter object as follows:
filter: {DisplayName:(page.ApplicationSearchValue.indexOf('!') == 0 ? page.ApplicationSearchValue.substring(1) : page.ApplicationSearchValue)}
However, there is a potential concern that this solution may still fail if someone begins their search query with multiple exclamation points like !!.
Have you encountered a common pattern or best practice for handling this type of scenario?