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