javascript - 为什么自定义过滤器不以 Angular 运行？

Question

下面是我的自定义过滤器。

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

 <form method="post" name="loginForm" class="form-group" novalidate>
    <input type="email"  name="username" ng-model="user.username" class="form-control" placeholder="Your email address" required /> 
     {{ user.username | inputFilter }} <!--this line is just for test purpose-->
    <input type="button" class="btn btn-primary" value="Login" ng-click="login(user)" />

 </form>

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

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

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

    {{ username | inputFilter }}

它过滤输入的字符串。

我的要求是:

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

如何根据我的要求运行过滤器。

Answer 1

当您在输入字段中使用 type="email" 时，如果只有电子邮件有效，那么该值将分配给 ng-model 变量。这就是为什么只有有效的电子邮件过滤器才有效。

如果 type="text" 那么对于你输入的每个字符模型都会改变并且过滤器会被执行

angular.module("app",[])
.controller("ctrl",function($scope){

$scope.user =  {};
})
.filter('inputFilter', function () {
  return function (str) { 
    var output;

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

        return output;
    }
    else {
        return str;
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <form method="post" name="loginForm" class="form-group" novalidate>
    <input type="email"  name="username" ng-model="user.username" class="form-control" placeholder="Your email address" required /> 
     {{ user.username | inputFilter }}
    <input type="button" class="btn btn-primary" value="Login"               ng-click="login(user)" />

 </form>
</div>