Javascript 为什么自定义过滤器不在角度模式下运行？

下面是我的自定义过滤器

app.filter('inputFilter', function () {
return function (str) {
    var output;

    if (str != "" && str != null && isNaN(str)) {
        output = str.trim().toLowerCase();

        return output;
    }
    else {
        return str;
    }
}

HTML

{{user.username | inputFilter}

在这个真实场景中，过滤器没有执行

但是，出于测试目的，我将html翻转为：-

<input type="text" ng-model="username" class="form-control" /> <br/>

    {{ username | inputFilter }}

{{username | inputFilter}

它过滤输入字符串

我的要求是：

• 这是登录表单，所以当用户提交用户名时，我想过滤输入，然后传递给控制器（我同意有更简单的方法，但我想使用过滤器）

如何为我的需求运行筛选器。

当您在输入字段中使用

type=“email”

时，如果只有email有效，则将分配给ng模型变量的值。这就是为什么只有有效的电子邮件过滤器才能工作

如果

type=“text”

那么对于您键入的每个字符，model将被更改，filter将被执行

角度模块（“应用程序”，[]） .controller（“ctrl”，函数（$scope）{ $scope.user={}； }) .filter（'inputFilter'，函数（）{ 返回函数（str）{ var输出； 如果（str！=“”&&str！=null&&isNaN（str））{ 输出=str.trim（）.toLowerCase（）； 返回输出； } 否则{ 返回str； } } })

{{user.username | inputFilter}

您的过滤器没有问题

您认为过滤器不起作用的原因是您使用了input

type=“email”

，其中ng模型仅在值有效时更新

在测试用例中，它是有效的，因为您使用了将自动更新的

type=“text”

请看演示

angular.module（'myApp'，[]）；
有棱角的
.module（'myApp'）
.controller（'MyController'，MyController）
.filter（'inputFilter'，inputFilter）；
MyController.$inject=['$scope']；
函数MyController（$scope）{
$scope.login=函数（usr）{
警报（usr）；
};
$scope.user={
用户名：'ABC@xyz.com',
名字：“任何东西”
};
}
函数inputFilter（）{
返回函数（str）{
var输出；
如果（str！=“”&&str！=null&&isNaN（str））{
输出=str.trim（）.toLowerCase（）；
返回输出；
}否则{
返回str；
}
}
}

电邮：

值：{{user.username}

筛选器：{{user.username | inputFilter}

正文：

值：{{user.name}

筛选器：{{user.name | inputFilter}

您希望筛选器修改存储在

user.username

中的值吗？@raina77ow，是的，未存储，这是登录表单，因此当用户提交其用户名时，我希望筛选输入，然后传递给控制器，但它不起作用。引用文档：

过滤器只是将输入转换为输出的函数。您最好在该字段的getter中使用filter。@raina77ow，“您最好在该字段的getter中使用filter”抱歉！！我不明白你的意思。你能添加代码片段吗？？？@raina77ow，如果我通过简单的ng模型，自定义过滤器会过滤输入，但如果我以user.username的身份通过，则不会，所以是什么原因造成的哦。错过了这个。。。太好了，我明白了。。谢谢。正确，谢谢
<input type="text" ng-model="username" class="form-control" /> <br/>

    {{ username | inputFilter }}