相信在大家已經(jīng)學(xué)習(xí)了足夠多關(guān)于AngularJS的知識(shí)后，就可以開始創(chuàng)建第一個(gè)AngularJS應(yīng)用程序，這篇文章通過(guò)示例給大家介紹如何利用Angular.js限制textarea輸入的字?jǐn)?shù)，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。

前言

大家可能都遇到過(guò)在輸入的時(shí)候做出限制的需求，本文介紹的是通過(guò)Angular.js限制textarea輸入字?jǐn)?shù)的方法，有需要的朋友們可以參考以下實(shí)例。

實(shí)例代碼如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS 簡(jiǎn)單應(yīng)用程序--輸入字?jǐn)?shù)限制</title>
<!--
 @author:sm
 @email:sm0210@qq.com
 @desc:AngularJS 簡(jiǎn)單應(yīng)用程序--輸入字?jǐn)?shù)限制
-->
</head>
<!--
 AngularJS 應(yīng)用程序
 您已經(jīng)學(xué)習(xí)了足夠多關(guān)于 AngularJS 的知識(shí)，現(xiàn)在可以開始創(chuàng)建您的第一個(gè) 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é)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。

您可能感興趣的文章:

相關(guān)文章

AngularJS中的緩存使用
一個(gè)緩存就是一個(gè)組件，它可以透明地儲(chǔ)存數(shù)據(jù)，以便以后可以更快地服務(wù)于請(qǐng)求。這篇文章主要介紹了AngularJS中的緩存使用，有興趣的可以了解一下。
2017-01-01
深入理解angularjs過(guò)濾器
下面小編就為大家?guī)?lái)一篇深入理解angularjs過(guò)濾器。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
詳解AngularJS驗(yàn)證、過(guò)濾器、指令
這篇文章主要介紹了AngularJS驗(yàn)證、過(guò)濾器、指令的相關(guān)知識(shí),angularJS中提供了許多的驗(yàn)證指令，可以輕松的實(shí)現(xiàn)驗(yàn)證，具體詳情大家通過(guò)本文一起學(xué)習(xí)吧，需要的朋友可以參考下
2017-01-01
Angular實(shí)現(xiàn)的簡(jiǎn)單查詢天氣預(yù)報(bào)功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)的簡(jiǎn)單查詢天氣預(yù)報(bào)功能,涉及AngularJS針對(duì)第三方API接口交互的相關(guān)操作技巧,需要的朋友可以參考下
2017-12-12
AngularJS中過(guò)濾器的使用與自定義實(shí)例代碼
這篇文章運(yùn)用實(shí)例代碼給大家介紹了angularjs中過(guò)濾器的使用和自定義過(guò)濾器，對(duì)大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值，感興趣的朋友們可以參考借鑒。
2016-09-09
Angular中的NgZone.run()有什么用途
在Angular中,NgZone是一個(gè)服務(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í)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-07-07
詳解AngularJS中$filter過(guò)濾器使用(自定義過(guò)濾器)
這篇文章主要介紹了詳解AngularJS中$filter過(guò)濾器使用(自定義過(guò)濾器)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-02-02
Angular4集成ng2-file-upload的上傳組件
本篇文章主要介紹了Angular4集成ng2-file-upload的上傳組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
解決Angular4項(xiàng)目部署到服務(wù)器上刷新404的問(wèn)題
今天小編就為大家分享一篇解決Angular4項(xiàng)目部署到服務(wù)器上刷新404的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08