資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
安卓
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚
法律AngularJS – ngMaxlength 指令
AngularJS 中的ngMaxlength 指令將 maxlength 驗證器新增到ngModel。該指令通常用於控制基於文字的輸入，但也可用作控制基於自定義文字的控制元件。
如果 ngModel.$viewValue 的值長於透過評估 ngMaxlength 屬性值中定義的 Angular JS 表示式所獲得的整數值，則此驗證器將設定maxlength 錯誤鍵。
語法
<element ng-maxlength="expression">..content..</element>
示例 − ngMaxlength 指令
在 Angular 專案目錄中建立一個檔案 "ngMaxlength.html"，貼上以下程式碼片段。
<!DOCTYPE html>
<html>
<head>
<title>ngMaxlength Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app="app" style="text-align: center;">
<h1 style="color: green;">
Welcome to Tutorials Point
</h1>
<h2>
AngularJS | ngMaxlength Directive
</h2>
<div ng-controller="demo">
<form name="form">
<label for="maxlength">Input the text maxlength: </label>
<input type="number" ng-model="maxlength" id="maxlength" />
<br />
<label for="input">This input is restricted by the current maxlength: </label>
<input type="text" ng-model="model" id="input" name="input" ng-maxlength="maxlength" /><br />
<br />
input valid? = <code>{{form.input.$valid}}</code><br />
model = <code>{{model}}</code>
</form>
</div>
<script>
angular.module("app", []).controller("demo", [
"$scope",
function ($scope) {
$scope.maxlength = 5;
},
]);
</script>
</body>
</html>輸出
要執行上述程式碼，只需訪問你的檔案，像普通 HTML 檔案一樣執行即可。
觀察一下當輸入文字的長度超過maxlength 時產生的輸出，input 會變成無效狀態。
更新於： 08-10-2021
378 次瀏覽
廣告