Question

我已经浏览了很多链接和论坛，但仍然无法确定是否可以使用angularjs中的过滤器来格式化输入字段。我已经看过过滤器，用于通过控制器或指令将范围内的数据格式化为视图。但是当我们在该字段中输入值时，是否会过滤选项以格式化输入文本中的值？

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

我输入值为11031988，输入值后，可以将字段中的值格式化为11/03/1988，过滤器还是指令？

Answer 1

我编写了一个代码片段，可以在输入日期时格式化日期。数字将自动放入格式。您可以运行此代码以查看我的意思：

＆＃13;

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);
      }
    };
  }
]);

＆＃13;

<!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>

＆＃13;

使用过滤器输入字段格式

1 个答案: