即使超過ng-maxlength，如何顯示文本長度？

Question

我無法看到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>

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

Answer 2

只是提高了@約翰·史密斯的回答是：

你可以直接把他驗證你的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>