即使超过ng-maxlength,如何显示文本长度?
问题描述:
我无法看到ng-maxlength
达到的字符数。即使超过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>
答
只是提高了@约翰·史密斯的回答是:
你可以直接把他验证你的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>