Angular material 使用 md-max-length 和 pattern 设计 md-autocomplete

Question

我正在使用 md-autocomplete 指令作为 邮政编码 查询的地址。我想将用户在控件中键入的内容限制为仅五位数的邮政编码。必须是数字，限制5个数字。

如何在 md-autocomplete 中实现这一点？

Answer 1

您可以使用过滤器实现此目的：http://jsfiddle.net/uhmgp23h/2/

<body ng-app="MyApp">
    <div ng-controller="MyController">
        <input type="text" ng-model="zip" />
    </div>
</body>

js

var app = angular.module('MyApp',[]);
app.controller('MyController', function($scope, $filter)
{
    $scope.zip = '';
    $scope.$watch('zip', function(newVal, oldVal)
    {
        var value = String(newVal);   
        var number = value.replace(/[^0-9]+/g,'');
        $scope.zip = $filter('numberFixedLen')(number,5);
    });
});

app.filter('numberFixedLen', function()
{
      return function(n, len)
      {
          var num = parseInt(n);
          if (String(num).length > len) return n.substring(0, len);
          return num;
      };
});

此过滤器会将字段限制为仅限数字，并将其限制为 5 个字符。此过滤器适用于任意数量的字符，只需将 5 更改为您在此行中想要的任何内容 $filter('numberFixedLen')(number,5);

Angular material 使用 md-max-length 和 pattern 设计 md-autocomplete

Angular material design md-autocomplete with md-max-length and pattern

angularjs

material-design

md-autocomplete