即使超过 ng-maxlength 如何显示文本长度？答案

【问题标题】：How to show text length even if it exceed ng-maxlength?即使超过 ng-maxlength 如何显示文本长度？
【发布时间】：2016-05-15 14:27:18
【问题描述】：

我看不到ng-maxlength 达到的字符数。

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
  <form name="form" novalidate>
    <input type="text" ng-model="myChar" ng-maxlength="5">
    <br>
    <h1>Length: {{myChar.length}}</h1>
  </form>
</div>

【问题讨论】：

标签： javascript angularjs validation maxlength ng-maxlength

【解决方案1】：

那是因为在您超过maxlength 之后，myChar 的$modelValue 将是未定义的。您仍然可以使用$viewValue 属性，如下例所示。

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.test = function() {
    console.log($scope.form.myChar.$viewValue.length);  
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
  <form name="form" novalidate>
    <input type="text" name="myChar" ng-model="myChar" ng-maxlength="5" ng-keyup="test()">
    <br>
    <h1>Length: {{myChar.length}}</h1>
  </form>
</div>

【讨论】：

【解决方案2】：

只是改进@John Smith 的答案：

您可以将他的验证直接放在您的 html 表达式中。然后你可以用一些 CSS 来设置它的样式，向用户显示长度是无效的：

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<style>
.red {
color: red;
}
</style>
<div ng-app="plunker" ng-controller="MainCtrl">
  <form name="form" novalidate>
    <input type="text" name="myChar" ng-model="myChar" ng-maxlength="5">
    <br>
    <h1 ng-class="{'red': form.myChar.$viewValue.length > 5}">Length: {{form.myChar.$viewValue.length}}</h1>
  </form>
</div>

【讨论】：