快捷導(dǎo)航

利用Angular.js限制textarea輸入的字?jǐn)?shù)

更新時(shí)間：2016年10月20日 08:40:56 投稿：daisy

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

前言

大家可能都遇到過在輸入的時(shí)候做出限制的需求，本文介紹的是通過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)一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章:

相關(guān)文章

angularJs關(guān)于指令的一些冷門屬性詳解
下面小編就為大家?guī)?lái)一篇angularJs關(guān)于指令的一些冷門屬性詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2016-10-10
Angular客戶端請(qǐng)求Rest服務(wù)跨域問題的解決方法
本篇文章主要介紹了Angular客戶端請(qǐng)求Rest服務(wù)跨域問題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
Angular2使用Angular CLI快速搭建工程（一）
這篇文章主要介紹了Angular2使用Angular CLI快速搭建工程,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
詳解Angular組件之投影
在html規(guī)范里面,它定義了非常多的標(biāo)簽,在這些標(biāo)簽里面,相同標(biāo)簽之間的嵌套,不同標(biāo)簽之間的嵌套,是十分常見,在Angular里面,我們可以通過自定義標(biāo)簽的方式引用組件,這里的標(biāo)簽?zāi)芊裣裨膆tml標(biāo)簽一樣,來(lái)嵌入html標(biāo)簽,或者嵌套其他組件標(biāo)簽?zāi)?本文將介紹投影的作用。
2021-05-05
Angular2學(xué)習(xí)筆記——詳解NgModule模塊
這篇文章主要介紹了Angular2學(xué)習(xí)筆記——詳解NgModule模塊,現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2016-12-12
Angular.js通過自定義指令directive實(shí)現(xiàn)滑塊滑動(dòng)效果
這篇文章主要給大家介紹了關(guān)于Angular.js如何通過自定義指令directive實(shí)現(xiàn)滑塊滑動(dòng)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-10-10
如何以Angular的姿勢(shì)打開Font-Awesome詳解
這篇文章主要給大家介紹了關(guān)于如何以Angular的姿勢(shì)打開Font-Awesome的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Angular具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2018-04-04
什么是 AngularJS？AngularJS簡(jiǎn)介
這篇文章主要介紹了什么是 AngularJS？AngularJS簡(jiǎn)介,本文講解了AngularJS方方面面的基礎(chǔ)知識(shí),AngularJS 是一個(gè)為動(dòng)態(tài)WEB應(yīng)用設(shè)計(jì)的結(jié)構(gòu)框架。它能讓你使用HTML作為模板語(yǔ)言，通過擴(kuò)展HTML的語(yǔ)法，讓你能更清楚、簡(jiǎn)潔地構(gòu)建你的應(yīng)用組件,需要的朋友可以參考下
2014-12-12
AngularJS實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)畫矩形框示例【可兼容IE8】
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)畫矩形框,涉及基于AngularJS的事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-05-05
angular使用bootstrap方法手動(dòng)啟動(dòng)的實(shí)例代碼
本篇文章主要介紹了angular使用bootstrap方法手動(dòng)啟動(dòng)的實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-07-07