利用Angular.js限制textarea輸入的字?jǐn)?shù)
更新時間：2016年10月20日 08:40:56 投稿：daisy
相信在大家已經(jīng)學(xué)習(xí)了足夠多關(guān)于AngularJS的知識后，就可以開始創(chuàng)建第一個AngularJS應(yīng)用程序，這篇文章通過示例給大家介紹如何利用Angular.js限制textarea輸入的字?jǐn)?shù)，有需要的朋友們可以參考借鑒，下面來一起看看吧。
前言
大家可能都遇到過在輸入的時候做出限制的需求，本文介紹的是通過Angular.js限制textarea輸入字?jǐn)?shù)的方法，有需要的朋友們可以參考以下實(shí)例。
實(shí)例代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS 簡單應(yīng)用程序--輸入字?jǐn)?shù)限制</title>
<!--
@author:sm
@email:sm0210@qq.com
@desc:AngularJS 簡單應(yīng)用程序--輸入字?jǐn)?shù)限制
-->
</head>
<!--
AngularJS 應(yīng)用程序
您已經(jīng)學(xué)習(xí)了足夠多關(guān)于 AngularJS 的知識，現(xiàn)在可以開始創(chuàng)建您的第一個 AngularJS 應(yīng)用程序：
-->
<body >
<div ng-app="myTodoApp" ng-controller="myTodoCtrl">
<h2>我的筆記</h2>
<p><textarea ng-model="message" cols="40" rows="10" ng-readonly="ngreadonly" ></textarea></p>
<p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p>
<p>剩下字符數(shù)：<span ng-bind="left()"></span></p>
</div>
<!--引入angular-->
<script src="js/angular.min.js"></script>
<script language="javascript">
var app=angular.module("myTodoApp",[]);
app.controller("myTodoCtrl",function($scope){
$scope.message="";
$scope.ngreadonly = false;
$scope.left = function(){
if($scope.message.length>100){
$scope.ngreadonly = true;
return 0;
}
return 100-$scope.message.length;
}
$scope.clear = function(){$scope.message="";$scope.ngreadonly = false;}
$scope.save = function(){$scope.message=""}
});
</script>
</body>
</html>
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
一個緩存就是一個組件，它可以透明地儲存數(shù)據(jù)，以便以后可以更快地服務(wù)于請求。這篇文章主要介紹了AngularJS中的緩存使用，有興趣的可以了解一下。2017-01-01
下面小編就為大家?guī)硪黄钊肜斫鈇ngularjs過濾器。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了AngularJS驗證、過濾器、指令的相關(guān)知識,angularJS中提供了許多的驗證指令，可以輕松的實(shí)現(xiàn)驗證，具體詳情大家通過本文一起學(xué)習(xí)吧，需要的朋友可以參考下2017-01-01
Angular實(shí)現(xiàn)的簡單查詢天氣預(yù)報功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)的簡單查詢天氣預(yù)報功能,涉及AngularJS針對第三方API接口交互的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
這篇文章運(yùn)用實(shí)例代碼給大家介紹了angularjs中過濾器的使用和自定義過濾器，對大家學(xué)習(xí)AngularJS具有一定的參考借鑒價值，感興趣的朋友們可以參考借鑒。2016-09-09
在Angular中,NgZone是一個服務(wù),用于管理異步任務(wù)的執(zhí)行,并提供一種在Angular區(qū)域內(nèi)或外部顯式運(yùn)行代碼的方式,NgZone.run方法是一種顯式在Angular區(qū)域內(nèi)運(yùn)行函數(shù)的方式,本文介紹Angular中的NgZone.run()有什么用,感興趣的朋友一起看看吧2024-01-01
Angular5中提取公共組件之radio list的實(shí)例代碼
這篇文章主要介紹了Angular5中提取公共組件之radio list的實(shí)例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
詳解AngularJS中$filter過濾器使用(自定義過濾器)
這篇文章主要介紹了詳解AngularJS中$filter過濾器使用(自定義過濾器)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
Angular4集成ng2-file-upload的上傳組件
本篇文章主要介紹了Angular4集成ng2-file-upload的上傳組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
解決Angular4項目部署到服務(wù)器上刷新404的問題
今天小編就為大家分享一篇解決Angular4項目部署到服務(wù)器上刷新404的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08