- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我在使用 $formatters 时遇到问题。
我的目标是隐藏电话号码,只保留最后 4 个字符可见。如果你不在输入中写任何东西就可以了。如果你写东西,模型会受到掩码的影响,我在数据库中注册了隐藏的电话......
这是我使用的指令:
.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);
});
}
};
});
对于您的设施,这里有一个带有一些实现的 fiddle : http://jsfiddle.net/nqp4qtLk/2/
如何防止模型受到面具的影响??
编辑:我调整 Gr3g 的答案以符合我的要求
查看更新后的 fiddle :Updated fiddle
最佳答案
请看我的EDITED fiddle :
如果您不允许删除 *:
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);
});
您或许可以让它变得更快,但在重构时要小心考虑所有可能的处理方式。特别是当 * 可以删除时。
关于javascript - 指令 $formatters 在编写时影响 ngModel,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35163785/
我目前理解 [(ngModel)]="expression" 是从组件到 View 的双向绑定(bind),反之亦然。我也明白 [ngModel]="expression" 是单向绑定(bind)(我
我实际上是在重复一个 mat 输入字段,然后我用数组中对象的属性名称编写了 [(ngModel)] 作为 [(ngModel)] 的值 例如这是我拥有的对象数组: test = [{name: 'Ha
我正在观看的 Udemy Angular 6 视频显示使用第一种语法。但是,我使用 WebStorm 作为我的 IDE,当我使用 [(ngModel)]="variable" 语法时,它不会提供任何类
我正在尝试用 Angular 数组绘制 radioBoxes,然后获取选中的 radio 的值,但是模型不会改变它的值吗,有人可以帮我吗? HTML部分
我有以下 ckEditor 指令。底部是我从有关如何在编辑器中设置数据的示例中看到的两种变体: app.directive('ckEditor', [function () { return
这是一个模板示例: 这里他们两个做同样的事情。首选哪一个?为什么? 最佳答案 [(ngModel)]="overRideRate" 是 [ngModel]="overRideRate"的缩写形式
我得到的是一个动态生成的 ngModel 对象,并且某些不在顶层的属性仅在一个方向上绑定(bind)。 包括一个应该让事情变得更清晰的 plunkr,但我想做的是生成一个动态表单,并且如果属性嵌套在根
嗨,哪个更好?有什么区别?有什么优点和缺点? 这是两者的对比代码: 范围:{ ngModel:'=' } app = angular.module('app', []); a
我正在尝试根据 angularjs 中的某些属性绑定(bind)未知的数组索引。 //javascript method inside controller functio
我试图在 ngFor 循环中输入具有正则表达式要求的输入,但收到“无法读取未定义的属性‘有效’”错误,我将其用作页面加载时弹出的错误消息。 这是我目前的代码: (我拥有的键管道是一个自定义管道,因为
我正在尝试将 ngControl 表单验证添加到 Angualr js 2 中的 bootstrap 4 typehead 控件。代码如下。 {{ requ
[(ngModel)] 在表单标签内不工作 当我使用 Multi Select Outside Form 标签时,可以正常选择 All 和取消选择所有功能 但是当我把它放入 Form 里面时,它正在工
假设我想要一个指令,它接受用户在输入中键入的内容并将其转换为小写。 所以我想出了一个这样的指令(在这个 Plunker http://plnkr.co/edit/jnE3s8MRr1tFCX0WVYe
我的名为 datePicker 的指令位于输入元素上,它从模型中获取公历日期并将其转换为最终用户的波斯日期。 从 datePicker 更改日期(这里是 jalali(波斯日期选择器)),转换为 gr
在这个例子中,我看到了解释,但我仍然不确定我为什么在这种情况下将#name 模板变量设置为“ngModel”。如果有 2 或 3 个其他带有模板变量的输入字段,您是否也将它们的值设置为“ngModel
这是我的 HTML 代码: Start 因此,startDate 存储为数字(长整型),但我想显示本地日期时间。我真的不知道该怎么做。我使用相同的组件来创建和更新模型。创建工作正常,因为
喜欢在 this question ,我要加.error在表单域的父级 .control-group当scope.$invalid是真的。 但是,像 ng-class="{ error: formNa
我正在尝试为颜色选择器创建指令,但 ngModel 值的值未更新。知道出了什么问题吗? 这是我的代码: .directive('colpkr', [function () {
我不是 Angular 事件方面的专家,但这是我的问题。如果我运行以下代码,我基本上会用错误的信息更新后端,因为 item.their_platform 在 togglePlatform() 触发之前
我有这个数组试图在我的模板中显示,不知何故它无法正确显示。如果我这样做 [value],它将给我正确的值,但 ofc。不绑定(bind)到数组和值。 大批: {"pluNo":1,"pluName":
我是一名优秀的程序员,十分优秀!