如何在angularjs中应用特殊字符的搜索过滤器

时间:2016-02-02 06:35:40

标签: javascript angularjs

我有一系列播放器,我在其名称上应用搜索,但问题是名称包含一些特殊字符,我从谷歌获得了一些代码片段,如下所示:

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

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

问题 现在的问题是我如何应用它,而我已经在依赖于许多事情的 ng-repeat 上应用了过滤器。

这是我目前的实施:

<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>

查询依赖于不同下拉菜单上的其他过滤选项等,以便我可以轻松更改它。

提前致谢

2 个答案:

答案 0 :(得分:3)

您可以像这样使用多个过滤器:

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

答案 1 :(得分:0)

这就是你想要的吗?或者请向jsfiddle提供明确的要求。

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>

快乐帮助!