4

ページに単純な並べ替えを追加しています。アイデアは、製品を検索することです。これらの製品はスペイン語で書かれており、アクセントがあります。例: 「ハモン」。

これが私のコードです：

<div class="form-inline">
  <label>Search</label>
  <input type="text" ng-model="q"/>
</div>

<div ng-repeat="product in products_filtered = (category.products | filter:q | orderBy:'name')">
           ....
</div>

私が持っている唯一の問題は、製品「Jamón」を見つけるために「Jamón」と入力する必要があることです. ユーザーが「ハモン」と入力すると、結果に「ハモン」が含まれる必要があります。

角度フィルターを使用して検索し、アクセントを忘れるにはどうすればよいですか? 何か案が？

前もって感謝します。

4

5 に答える 5

9

フィルター関数 (またはフル フィルター) を作成する必要があります。これはおそらくうまくいく最も簡単なことです：

HTML

<div ng-app ng-controller="Ctrl">
    <input type="text" ng-model="search">
    <ul>
        <li ng-repeat="name in names | filter:ignoreAccents">{{ name }}</li>
    </ul>
</div>

Javascript

function Ctrl($scope) {
    function removeAccents(value) {
        return value
            .replace(/á/g, 'a')            
            .replace(/é/g, 'e')
            .replace(/í/g, 'i')
            .replace(/ó/g, 'o')
            .replace(/ú/g, 'u');
    }

    $scope.ignoreAccents = function(item) {               
        if (!$scope.search) return true;       

        var text = removeAccents(item.toLowerCase())
        var search = removeAccents($scope.search.toLowerCase());
        return text.indexOf(search) > -1;
    };

    $scope.names = ['Jamón', 'Andrés', 'Cristián', 'Fernán', 'Raúl', 'Agustín'];
};

ここでjsFiddle 。

これは文字列の配列に対してのみ機能することに注意してください。オブジェクトのリストをフィルタリングする (そして Angular のようにすべてのオブジェクトのすべてのプロパティを検索する) 場合は、フィルター機能を拡張する必要があります。この例から始めるべきだと思います。

于 2013-08-10T20:30:13.283 に答える
3

JavaScript には と呼ばれるきちんとした関数があり、とを同等のものとして扱うオプションをlocaleCompare指定できますが、広くサポートされているわけではありません。唯一の選択肢は、両方の文字列を手動で正規化し(置換など)、結果を比較するフィルター関数を作成することだと思います。sensitivity = baseáaóo

于 2013-08-10T18:38:58.240 に答える
2

これは、上記のわずかに拡張されたバージョンです (もちろん、検索する余分な外国語の文字は数えません)。これをコントローラーに直接入れると、検索したいすべてのデータを検索することができました。ベルナルドさん、ご意見ありがとうございます！

それが誰かを助けることを願っています。

 function removeAccents(value) {
    return value
         .replace(/á/g, 'a') 
         .replace(/â/g, 'a')            
         .replace(/é/g, 'e')
         .replace(/è/g, 'e') 
         .replace(/ê/g, 'e')
         .replace(/í/g, 'i')
         .replace(/ï/g, 'i')
         .replace(/ì/g, 'i')
         .replace(/ó/g, 'o')
         .replace(/ô/g, 'o')
         .replace(/ú/g, 'u')
         .replace(/ü/g, 'u')
         .replace(/ç/g, 'c')
         .replace(/ß/g, 's');
}

$scope.ignoreAccents = function (item) {
if ($scope.search) {
var search = removeAccents($scope.search).toLowerCase();
var find = removeAccents(item.name + ' ' + item.description+ ' ' + item.producer+ ' ' +        item.region).toLowerCase();
return find.indexOf(search) > -1;
}
return true;
};
于 2014-11-01T19:50:26.027 に答える