angularjs:无法在类型编号的输入字段中显示特殊字符

时间:2014-04-08 19:13:18

标签: html5 angularjs

我在格式化输入字段时遇到angularjs问题。这是背景

我们需要一个信用卡输入文本字段,需要输入type =“number”,以便移动设备可以显示数字键盘。在模糊事件中,我们需要屏蔽除了最后4个之外的所有数字。

即使角度ng模型在模型中接受特殊字符,该值也不会显示在输入字段中。

这里的示例代码说明了问题。

<!DOCTYPE html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
    <meta charset="utf-8"/>
  </head>
  <body>
    <div ng-controller="PaymentController">
      Card Number 1:<input type="number" ng-model="ccard1" /> {{ccard1}} <br/>
      Card Number 2:<input type="number" ng-model="ccard2" /> {{ccard2}} <br/>
      Card Number 3:<input type="number" ng-model="ccard3" /> {{ccard3}}    
    </div>
    <script>
      function PaymentController($scope){
        $scope.ccard1=1234;   
        $scope.ccard2='1234';     
        $scope.ccard3='####';             
      }
    </script>
  </body>
</html>

这是jsbin demo

有谁帮我解决了这个问题?

1 个答案:

答案 0 :(得分:1)

这是一个有效的解决方案,可能不是正确的方法。

创建一个指令并删除解析器&amp;该字段的格式化程序。一个警告是表单验证不起作用,你必须手动验证。

paymentApp.directive('rawinput', function(){
    return {
        require: 'ngModel',
        priority: 100,
        link: function(scope, ele, attr, ngModel){
            ngModel.$parsers=[];
            ngModel.$formatters=[];
        }
    };
});

并在需要的地方指定指令,如此

<input type="number" ng-model="ccard3" rawinput/>

这是工作演示:http://jsbin.com/fated/2/edit