为什么自定义过滤器没有以角度运行？

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

它过滤输入字符串。

我的要求是：

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

如何为我的需求运行过滤器。

Answer 1

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

如果 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>

Answer 2

没有什么不对您的过滤器。

您认为您的过滤器无法正常工作的原因是因为您使用了输入type="email"，其中ng-model只在该值有效时才会更新。

并在测试的情况下，它工作，因为你已经使用type="text"它会自动更新。

查看演示。

angular.module('myApp', []); 
 

 
angular 
 
    .module('myApp') 
 
    .controller('MyController', MyController) 
 
    .filter('inputFilter', inputFilter); 
 

 
MyController.$inject = ['$scope']; 
 

 
function MyController($scope) { 
 
    $scope.login = function(usr) { 
 
    alert(usr); 
 
    }; 
 
    $scope.user = { 
 
    username: 'ABC@xyz.com', 
 
    name: 'ANYthing' 
 
    }; 
 

 
} 
 

 

 
function inputFilter() { 
 
    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.4.8/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyController"> 
 

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

 
    </form> 
 

 
</div>