CODEWITHSUNDEEP
javascriptangularjs
Ali Raza
Ali Raza

Reputation: 1131

How to apply search filter for special chracter in angularjs

I have an array of players where I applied search on their names but the problem is name contain some special characters, I got some code snippet from google like below :

$scope.modelFilterNormalized = function(){
   if($scope.modelFilter)
       return $scope.modelFilter.replace('É','E').replace(/* ... */);
   else return '';
};

tr ng:repeat="friend in friends | filter:modelFilterNormalized()">

Problem Now the problem is how I can apply it while I am already applying filter on ng-repeat thats depend on many thing.

here is my current implementation:

<input class="form-control" placeholder="Inserisci un giocatore" type="search"  ng-model="query.PlayerName">

<div class="table-tr museo_sans500"
     ng-click="addPlayer(player)"
     ng-class="{'active':activeStats == player.PlayerId}"
     ng-switch-default
     ng-repeat = "player in players | filter: query " my-repeat-directive>

query is dependent on other filtering option on different dropdown etc so how I can easily change it.

Thanks in advance

Upvotes: 0

Views: 154

Answers (2)

Jafer.balti
Jafer.balti

Reputation: 584

You may use multiple filter like this:

ng-repeat = "player in players | filter: query | filter:normalized "

Upvotes: 4

Zeeshan Hassan Memon
Zeeshan Hassan Memon

Reputation: 8325

Is that what you want? or please provide jsfiddle with clear requirement.

angular.module('app', [])
    .controller('ctrl', function ($scope) {
     $scope.players = ['Amón', 
                     'Bmón', 
                     'Cmán', 
                     'Daún'];
  
  
   function handleSpecialChars(value) {
        return value
            .replace(/á/g, 'a')            
            .replace(/é/g, 'e')
            .replace(/í/g, 'i')
            .replace(/ó/g, 'o')
            .replace(/ú/g, 'u');
    }

    $scope.normalized = function(item) {               
        if (!$scope.query) return true;       

        var text = handleSpecialChars(item.toLowerCase())
        var search = handleSpecialChars($scope.query.toLowerCase());
        return text.indexOf(search) > -1;
    };
  
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">

<input placeholder="name" ng-model="newPlayer">
<button ng-click="players.push(newPlayer);newPlayer='';">Add Player</button>  
<input placeholder="search" type="search" ng-model="query">

<div ng-repeat="player in players | filter:normalized ">{{player}}
</div>

Happy Helping!

Upvotes: 0

Related Questions