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

它过滤输入字符串。

我的要求是：

这是登录表单，因此当用户提交他的用户名时，我想过滤输入＆amp;然后传递给控制器（我同意有更简单的方法，但我想用过滤器来做）

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

Answer 1

您的过滤器没有任何问题。

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

并且在测试用例中它正在运行，因为您已使用type="text"自动更新。

参见演示。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

如果type="text"那么你键入模型的每个字符都会改变，过滤器将被执行

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: