如何僅顯示角材料和角度js中輸入字段的最後四位數字？

我想創建一個只有最後4位數字顯示的MD輸入字段，如「******** 1234」。我是角質材料和角度js的新手，我的知識僅限於md輸入密碼，但所有字符都隱藏或替換爲「」。我做了這個JavaScript，它的工作！但我不知道角js中的等效代碼是什麼。這裏是我的代碼：`$（'＃cardNum'）。bind（'input'，function（）{ $（this）.val（（$（this）.val（）。replace（/ \ d（？= \ d {4}）/ g，''）））; }）;如何僅顯示角材料和角度js中輸入字段的最後四位數字？

來源

2016-09-07 Ryu Roble

我做了一個javascript的這個，它的工作！但我不知道角js中的等效代碼是什麼。這裏是我的代碼：'$（'＃cardNum'）。bind（'input'，function（）{ $（this）.val（（$（this）.val（）。replace（/ \ d（？= \ d {4}）/ g，'*'）））; }）;' –

你可以爲它創建一個自定義過濾器：

appModule.filter('passwordMask', function() { 
    return function (input, num) { 
     if (isNaN(num) || num < 1) { 
      return String(input).replace(/./g, '*'); 
     } 
     var mask = RegExp('(.{1,' + num + '}$)|.', 'g'); 
     return String(input).replace(mask, function(hide, show) { 
      return show || '*'; 
     }); 
    }; 
});

而且使用這種方式：

<div ng-bind="passwordModel | passwordMask:4" class="password-style"></div>

希望它能幫助。

來源

2016-09-07 01:02:23

您能解釋一下正則表達式嗎？你如何使用'function（hide，show）'來使用匹配組？ – neaumusic

@Guedes我可以把它放在控制器裏面嗎？ –

@neaumusic。你可以看到[正在使用的正則表達式]（https://regex101.com/r/pZ5iM3/1）。 'hide'這個名字只是說明性的，因爲我沒有進一步使用它。我使用'RegExp'來連接可以看到的數字的數量（將在show組中匹配），每隔一個匹配/數字將返回一個星號。 –

@Guedes我可以在輸入字段中使用它嗎？

<input name="password" type="password" ng-bind="user.password | passwordMask:4" /> 

    myapp.controller('controller', function ($scope) { 
     $scope.user = { 
     name: '', 
     password: '', 
     }; 
    });

來源

2016-09-07 03:15:36 JustineP

輸入需要ng模型...但ng模型不允許使用過濾器。 –

是的，但我需要輸入字段來過濾自己，有什麼想法？ – JustineP

你可以嘗試使用CSS來掩碼，如下所示：http://jsbin.com/gakayupole/edit?html,css,js,output –

如何僅顯示角材料和角度js中輸入字段的最後四位數字？

回答

相關問題