Question

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

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

但是，我收到错误“source is undefined”，我不明白为什么。我也不能在我的控制器中使用一个函数作为过滤器，因为我将在更多的控制器中使用它。我想找到我的代码上的错误。

当用户进入页面时，

ctrl.curso是预定义的，因此我不理解'source is undefined'错误，因为始终定义了ctrl.curso。 ctrl.curso是通过$ http请求获取的，如果相关的话。

之前我使用的是|filter: ctrl.curso，但是知道我需要将ctrl.curso转换为不带重音的字符串，并根据此字符串过滤列表。

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

Answer 1

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

search | removeAcentos

然后，您希望根据以下新值过滤数组：

filter: (search | removeAcentos)

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

更新ng-repeat的结果：

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

链接到Working JSFiddle

Answer 2

只需添加支票：

.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;
    };
})

Answer 3

您没有正确使用过滤器。

如果您要过滤集合 - 使用过滤器进行收集并返回新集合，其中属性将从重音中过滤掉

如果您想使用过滤器进行显示 - 请不要将过滤器应用于ng-repeat，将其应用于您的其他绑定，即这是您的新html：

 <li ng-repeat="curso in ctrl.arrayCursos ">
   {{   ctrl.curso | removeAcentos }} 
 </li>

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

3 个答案: