掩盖了AngularJS [英] Masking in AngularJS

问题描述

是否有可能创造angularJS面具，看起来像这样

Is it possible to create a mask in angularJS that looks like this

02年07个月。

当文本框用户点击它应该更改为以下文本

And when the user clicks on the text box it should change to the following text

0207

由于一吨！

推荐答案

您可以使用一个指令绑定到重点和模糊事件。 http://plnkr.co/sFyfYstSlQpZtLUGbmwh

You can use a directive to bind to focus and blur events. http://plnkr.co/sFyfYstSlQpZtLUGbmwh

<input type="text" year-month data="foo.bar"></input>  

app.directive('yearMonth', function() {
    return {
        restrict: 'A',
        scope: {
          data: '='
        },
        link: function(scope, element, attr) {
          var re = /(\d{2})(\d{1,2})()/;

          function addMask(text) {
            return text.replace(re, "$1years$2months");
          }

          function removeMask(text) {
            return text.replace(re, "$1$2");
          }

          element.val(addMask(scope.data));

          element.bind('blur', function () {
            scope.$apply(function() {
              var text = element.val();

              scope.data = text;
              element.val(addMask(text));
            });
          });

          element.bind('focus', function () {
            scope.$apply(function() {
              element.val(removeMask(scope.data));
            });
          });
        }
    };
});

不过，请务必阅读这个问题：如何可做双向滤波angular.js？有可能是一个preferable解决方案，用户在解析器和格式化 ngModelController 。

But, be sure to read this question: How to do two-way filtering in angular.js? There is likely a preferable solution that users the parsers and formatters of ngModelController.

这篇关于掩盖了AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！