如何显示文本长度，即使它超过ng最大长度

How to show text length even if it exceed ng-maxlength?

本文关键字：ng 显示 文本 何显示      更新时间：2023-09-26

我看不到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>

这是因为超过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>

只是改进了@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>

相关文章：