Angular过滤器，用于在应用过滤器之前从输入的单词中删除重音

Angular filter to remove accents from the word inputed before applying the filter

本文关键字：过滤器 输入 单词中 删除 用于 应用 Angular      更新时间：2023-09-26

我使用以下过滤器从用户在输入字段中输入的单词中删除重音，然后在过滤器上使用生成的字符串。

    .filter('removeAcentos', function(){
    return function (source) {
        var accent = [
            /['300-'306]/g, /['340-'346]/g, // A, a
            /['310-'313]/g, /['350-'353]/g, // E, e
            /['314-'317]/g, /['354-'357]/g, // I, i
            /['322-'330]/g, /['362-'370]/g, // O, o
            /['331-'334]/g, /['371-'374]/g, // U, u
            /['321]/g, /['361]/g, // N, n
            /['307]/g, /['347]/g, // C, c
        ],
        noaccent = ['A','a','E','e','I','i','O','o','U','u','N','n','C','c'];
        for (var i = 0; i < accent.length; i++){
            source = source.replace(accent[i], noaccent[i]);
        }
        return source;
    };
})

视图中的代码是:

    <input type="text" id="curso" name="curso" ng-model="ctrl.curso" validate>
    <ul>
        <li ng-repeat="curso in ctrl.arrayCursos | removeAcentos: ctrl.curso">
        ...
        </li>
    </ul>

然而，我得到错误"源是未定义的"，我不明白为什么。我也不能在控制器中使用函数作为过滤器因为我将在更多控制器中使用它。我想找出我的代码中的错误在哪里。

ctrl.curso是在用户进入页面时预定义的，所以我不理解'source is undefined'错误，因为ctrl.curso总是被定义的。ctrl.curso是通过$http请求获得的，以防它是相关的。

我以前使用|filter: ctrl.curso，但知道我需要转换ctrl。光标移到不带重音的字符串，并根据该字符串过滤列表。

只是为了澄清，我正在寻找根据用户输入的单词过滤数组。但是，首先我想将这个单词转换为不带重音的字符串，然后应用过滤器本身。例如，如果用户输入单词"espcie"，我希望根据字符串"especie"进行过滤。

您需要链接过滤器。首先，您需要删除用户输入中的重音:

search | removeAcentos

然后你想要根据这个新值过滤你的数组:

filter: (search | removeAcentos)

请注意括号，以确保过滤器以正确的顺序应用。

更新ng-repeat的结果:

<li ng-repeat="curso in ctrl.arrayCursos | filter: (search | removeAcentos)" />
        {{ curso }}
</li>

链接到工作JSFiddle

只需添加支票:

.filter('removeAcentos', function(){
    return function (source) {
        if(!angular.isDefined(source)){ return; }
        var accent = [
            /['300-'306]/g, /['340-'346]/g, // A, a
            /['310-'313]/g, /['350-'353]/g, // E, e
            /['314-'317]/g, /['354-'357]/g, // I, i
            /['322-'330]/g, /['362-'370]/g, // O, o
            /['331-'334]/g, /['371-'374]/g, // U, u
            /['321]/g, /['361]/g, // N, n
            /['307]/g, /['347]/g, // C, c
        ],
        noaccent = ['A','a','E','e','I','i','O','o','U','u','N','n','C','c'];
        for (var i = 0; i < accent.length; i++){
            source = source.replace(accent[i], noaccent[i]);
        }
        return source;
    };
})

您没有正确使用过滤器。

如果你要过滤集合-对集合使用过滤器并返回新集合，其中属性将被过滤掉重音

如果你想用filter来显示，不要把filter应用到ng-repeat上，把它应用到你的其他绑定上，也就是你的新html:

 <li ng-repeat="curso in ctrl.arrayCursos ">
   {{   ctrl.curso | removeAcentos }} 
 </li>
相关文章：