Question

我试图使用过滤器掩盖SSN的前5位数字，看起来应该是这样的 XXX-XX-1234

到目前为止我想出了什么：

// <td>{{SocialSecurityNumber | ssn}}

angular.module('ng').filter('ssn', function () {
    return function (ssn) {
        if (!ssn) {
            return '';
        }

        var value = ssn.toString().trim().replace(/^\+/, '');

        if (value.match(/[^0-9]/)) {
            return ssn;
        }

        return (ssn.slice(0, 3).replaceWith('*') + '-' + ssn.slice(4, 5).replaceWith('*') + '-' + ssn.slice(4)).trim();
    };
});

Answer 1

字符串在JavaScript中没有.replaceWith函数。不过，您可以使用.replace。

我不确定value.match(/[0-9]/)应该做什么。好像你可以删除它。如果值甚至有一位数，这将返回true，无论如何它都应该返回。也许你的意思是/[^0-9]/

return "XXX-XX-" + ssn.slice(5);

Answer 2

您可以在不更改模型值的情况下屏蔽输入框，此代码必须有所帮助。以下是工作代码Plunkr / Github

var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
  $scope.modelssn = '';
});

app.directive("ssnInput",function(){
    return {
        require:'ngModel',
        link: function(scop, elem, attr, ngModel){
            $(elem).mask("999-99-9999");
            var temp;
            var regxa = /^(\d{3}-?\d{2}-?\d{4})$/;
            $(elem).focusin(function(){
                $(elem).val(temp);
            });
            $(elem).on('blur',function(){
                temp = $(elem).val();
                if(regxa.test($(elem).val())){
                   $(elem).val("XXX-XX" + temp.slice(6));
               }
            });
        }
    }
});

<!DOCTYPE html>
<html ng-app="myapp">
  <head>
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://cdn.rawgit.com/digitalBush/jquery.maskedinput/master/src/jquery.maskedinput.js"></script>
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    Enter SSN <input type="text" ng-model="modelssn" ssn-input >
    <p>Real SSN {{modelssn}} </p>
  </body>
</html>

Answer 3

## I faced the similer issue. Below is the solution for that :

angular
.module('app')

.directive('ssnOnly', function () {
           return {
               require: 'ngModel',
               link: function (scope, element, attr, ngModelCtrl) {
                   var flag = 0;
                   function fromUser(text) {
                       if (text) {                          
                           var transformedInput = text.replace(/[^0-9 -]/g, '');                           

                           if (text.length < 3) {
                               flag = 0;
                           } else if (text.length > 3 && text.length < 6) {
                               flag = 1;                              
                           }

                           if (transformedInput !== text) {
                               ngModelCtrl.$setViewValue(transformedInput);
                               ngModelCtrl.$render();
                               alert("Only Numbers Allowed !!!");
                           } else {

                               if (transformedInput.length == 3 && flag == 0) {
                                   transformedInput = transformedInput + '-';
                                   flag = 1;
                               } else if (transformedInput.length == 6 && flag == 1) {
                                   transformedInput = transformedInput + '-';
                                   flag = 2;
                               }

                               if (transformedInput.length == 4 || transformedInput.length == 7)
                               {
                                   var id = transformedInput;
                                   var last = id.substr(id.length - 1);
                                   if (last != '-') {                                      
                                       transformedInput = transformedInput.substring(0, transformedInput.length - 1);
                                       transformedInput = transformedInput + '-' + last;
                                   }                                  
                               }                              

                               ngModelCtrl.$setViewValue(transformedInput);
                               ngModelCtrl.$render();                               
                           }
                           return transformedInput;
                       }
                       return undefined;
                   }
                   ngModelCtrl.$parsers.push(fromUser);
               }
           };
       })

 <input type="text" class="form-control" ssn-only ng-model="ssnNumber" placeholder="SSN" maxlength="11">

angularjs：掩盖SSN的前五位数

3 个答案: