应用更改字符的过滤器后按名称过滤

时间:2015-04-20 14:05:44

标签: javascript html angularjs

我遇到过这样一种情况:我需要过滤由' ng-repeat'指令,但是我已经为每个创建的元素应用了一个自定义过滤器,该过滤器将一个字符与另一个字符交换,反之亦然。

然后,如果我搜索交换的新字符,过滤器就找不到它 - 除非我搜索旧字符。

如何在使用自定义过滤器切换字符后应用此输入过滤器?

在我的自定义过滤器 brNumber 中,逗号交换,反之亦然,所以如果我搜索一个点,过滤器将会只找到带逗号的那些。

FIDDLE

< HTML>

<div 
ng-app="myApp" 
ng-init="
    person=
    [
        {firstName:'Johnny',lastName:'Dowy'},
        {firstName:'Homem,25',lastName:'Cueca,Suja'},                
        {firstName:'Alleria.Donna',lastName:'Windrunner'}
    ];"
>

First Name: <input type="text" ng-model="firstName">
<br />
The persons's objects have: | <span ng-repeat="i in person | orderBy: 'firstName' | filter:firstName">{{ ( i.firstName + ' ' + i.lastName ) | brNumber }} | </span>

{Javascript.js}

app.filter( 'brNumber', function()
{
    return function( text )
    {
        string = text.toString();        
        returnString = '';

        for ( i = 0; i < string.length; i++ )
        {
            returnString += string[i] ===  ',' ? '.' :
            (
                string[i] === '.' ? ',' : string[i]
            );
        }

        return returnString;
    }
});

1 个答案:

答案 0 :(得分:4)

您可以将过滤后的值与视图中的过滤器包含在同一函数中。请检查此https://jsfiddle.net/5Lcafzuc/3/

/// wrap filter argument in function
ng-repeat="i in person | orderBy: 'firstName' | filter: replace(firstName)"

/// add function in scope and use it in display filter
var replace = function(text) {        
         if(!text) {
           return false;
         }         

         if(text.indexOf(".") >= 0) {
           text = text.replace(".", ",");
         } else if(text.indexOf(",") >=0) {
           text = text.replace(",", ".");
         }

         return text;
      }

app.controller('myCtrl', function($scope) {    
    $scope.replace = replace;
});

app.filter( 'brNumber', function() {
    return function(text) {        
         return replace(text);
    }
});