Angularjs search with exclamation as first letter - angularjs

Question

Angularjs: Search filter not working when search starting with ! (exclamation mark)
If my data is like name='Anand!'
client side filter should work with searchWord='!'
Please if anyone has solution for the same then provide me the same.
Thanks in advance !!
My Code:
<input type="search" class="form-control" ng-model="searchtext"
placeholder="search here..." />
<div ng-repeat="cust in customers |orderBy:'id' | filter:searchtext">
</div>
$scope.customers = [{
"id": 1,
"first_name": "Anand!",
"last_name": "GK",
"gender": "Male"
}, {
"id": 2,
"first_name": "ABC !",
"last_name": "XYZ",
"gender": "Female"
}];

Answer 1

In above example you provide the filter on first_name only and also the function will be common for all so we can use it any where
this can be achieved too, all you have to do is get values of all fields in your object and then match the searchText like following:-
All you need to do, is write a custom filter of your own
angular.module('app', []).controller('ctrl', function($scope) {
$scope.customers = [{
"id": 1,
"first_name": "Anand!",
"last_name": "GK",
"gender": "Male"
}, {
"id": 2,
"first_name": "ABC !",
"last_name": "XYZ",
"gender": "Female"
}];
}).filter('searchFilter', function() { /* this the Custom Filter, you can code it to include other fields in search too */
return function(input, searchText) {
if (!searchText)
return input;
var matchedRecord = [];
var matchFound = false;
for (var i = 0; i < input.length; i++){
for (var key in input[i]) {
if(input[i][key] != undefined && input[i][key].toString().toLowerCase().indexOf(searchText.toLowerCase()) != -1) {
matchFound = true;
}
}
if(matchFound)
matchedRecord.push(input[i]);
matchFound = false;
}
return matchedRecord;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
<input type='text' ng-model='searchText' />
<ul>
<li ng-repeat='customer in customers | searchFilter: searchText'>{{customer | json}}</li>
</ul>
</div>