Question

我使用$ formatters时遇到问题。

我的目标是隐藏电话号码，只留下最后4个字符。如果你没有在输入中写任何东西，那就好了。如果你写的东西，模型会受到掩码的影响，我会在DB中注册隐藏的手机......

这是我使用的指令：

.directive('tsHideField', function () {
return {
    require: 'ngModel',
    restrict: 'A',
    link: function (scope, element, attributes, controller) {

        var maskValue = function (value) {
            if (!value) {
                return "";
            }
            if (value.length <= 4) {
                return value;
            }
            var valueHide = "";
            if (value.indexOf('@') === -1) {
                //leave last 4 chars
                valueHide = value.toString().substring(0, value.length - 4).replace(/[\S]/g, "\u2022");
                return valueHide + value.toString().substring(value.length - 4);
            } else {
                //Adresse email, on laisse après le @ et on cache tout sauf les 4 dernières lettre avant
                //'lambertjer@gmail.com'.substring(0,'lambertjer@gmail.com'.indexOf('@') - 4).replace(/[\S]/g, "\u2022") + 'lambertjer@gmail.com'.substring('lambertjer@gmail.com'.indexOf('@') - 4)
                valueHide = value.toString().substring(0, value.indexOf('@') - 4).replace(/[\S]/g, "\u2022");
                return valueHide + value.toString().substring(value.indexOf('@') - 4);
            }

            // replace all characters with the mask character
            //return (value || "").replace(/[\S]/g, "\u2022");
        }

        /** SI ON VEUT EGALEMENT CACHER A L ECRIT:
         * 
         * var createMaskedInputElement = function() {
            if (! maskedInputElement || ! maskedInputElement.length) {
                maskedInputElement = element.clone(true);
                maskedInputElement.attr("type", "password"); // ensure the value is masked
                maskedInputElement.removeAttr("name"); // ensure the password save prompt won't show
                maskedInputElement.removeAttr("core.application.main.directive.mask"); // ensure an infinite loop of clones isn't created
                maskedInputElement.bind("blur", function() {
                    element.removeClass("ng-hide");
                    maskedInputElement.remove();
                    maskedInputElement = null;
                });
                $compile(maskedInputElement)(scope);
                element.after(maskedInputElement);
            }
        };

        element.bind("focus", function() {
            createMaskedInputElement();
            element.addClass("ng-hide");
            maskedInputElement[0].focus();
        });
         */

        controller.$formatters.push(function (value) {
            return maskValue(value);
        });

    }
};
});

对于您的设施，这里有一个小实施的小提琴： http://jsfiddle.net/nqp4qtLk/2/

如何防止模型受到掩码影响？

编辑：我根据我的要求调整了Gr3g的答案

请参阅更新的小提琴：Updated fiddle

Answer 1

请参阅我的已编辑小提琴：

如果您不允许删除*：
Fiddle

如果您允许*删除：
Punker

注意：
如果您允许删除*，您将在plunker中看到我不允许以下内容：
- 当数字可见时删除星号 - 在2颗星之间或第一个位置添加数字。

代码已经成长，所以我只能在这里显示部分代码显然，您需要$parsers管道：

controller.$parsers.push(function(val){
 //Modify your value
 return modifiedValue || val;
});

注意我在每个管道中添加了2个函数，因此我可以在需要修改值的函数中访问String。关于演员阵容，我不必关心（太多）。

controller.$parsers.unshift(function(val){
  return String(val);
});

你可以让它更快，但在重构时要小心，以考虑所有可能的处理方法。特别是当*可以被删除时。

Answer 2

您可以使用$ parsers.push来控制要保存在模型中的值。

    var unmask = function(value) {
        var original = scope.vm.phone.toString();                   
        var last4 = value.substring(value.length-4);
        var newstr = original.substring(0, original.length-4);
        return (newstr+last4);   
        // you can have whatever logic you want, to manipulate the original value
    }

    controller.$parsers.push(function (value) { 
        return unmask(value);
        // or do what ever you want.
    });

更新了小提琴 - http://jsfiddle.net/anh9y8d9/3/

Answer 3

我认为你不能，想象我在2分之间删除一个，你会怎么做？

您应该使用2个不同的组件：一个用于键入每个字符，另一个显示电话号码，最后只显示4个。

最难的方法：自己处理输入上的所有关键事件，这样你甚至可以解决我在帖子开头所说的内容。

指令$ formatters在写入时影响ngModel

3 个答案: