爲什麼自定義過濾器沒有以角度運行？

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>