使用过滤器格式化输入字段答案

【问题标题】：input fields formating using filters使用过滤器格式化输入字段
【发布时间】：2014-08-07 10:39:48
【问题描述】：

我浏览了许多链接和论坛，但仍然无法最终确定 angularjs 中的过滤器是否可用于格式化输入字段。我已经看到了通过控制器或指令对从范围到视图的数据进行格式化的过滤器。但是，当我们在该字段中输入值时，过滤器是否可以在输入文本中格式化值？

我相信带有解析器和格式化程序的指令能够对输入进行格式化。

我正在输入一个值为 11031988 的值，一旦我输入该值，它可以将字段中的值格式化为 11/03/1988 ，过滤器或指令？

【问题讨论】：

代码你贴一些代码？还是个笨蛋更好？
不，过滤器不是这项工作的工具。如您所说，使用指令和$parsers/$formatters 管道。查看最近的example。

标签： angularjs angularjs-directive format angularjs-filter

【解决方案1】：

我编写了一个代码 sn-p，它可以在输入日期时对其进行格式化。数字将自动输入格式。你可以运行这段代码来看看我的意思：

var app = angular.module('App', []);

app.controller('MainCtrl', function($scope) {});

app.directive('inputRestrictor', [
  function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attr, ngModelCtrl) {
        var pattern = /[^0-9]/g;
        
        function fromUser(text) {
          if (!text)
            return text;
          var transformedInput = text.replace(pattern, '');
          transformedInput = transformedInput.replace(/^([0-9]{0,8}).*$/, "$1");
          transformedInput = transformedInput.replace(
              /([0-9]{1,2})([0-9]{1,2})([0-9]{0,4}$)/, "$1/$2/$3")
          ngModelCtrl.$setViewValue(transformedInput);
          ngModelCtrl.$render();
          return transformedInput;
        }
        ngModelCtrl.$parsers.push(fromUser);
      }
    };
  }
]);

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.3.0-rc.2" data-semver="1.3.0-rc.2" src="  https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="App">
    <div ng-controller="MainCtrl">
      <input type="text"  ng-model="inputValue" input-restrictor>
      <input type="submit" ng-click="getdata()" />
    </div>
  </body>

</html>

【讨论】：