AngularJS 是一個(gè) MV* 框架，最適于開發(fā)客戶端的單頁面應(yīng)用。它不是個(gè)功能庫，而是用來開發(fā)動態(tài)網(wǎng)頁的框架。接下來通過本文給大家介紹AngularJS實(shí)現(xiàn)textarea記錄只能輸入規(guī)定數(shù)量的字符并顯示的相關(guān)內(nèi)容，需要的朋友參考下吧

AngularJS 是一個(gè) MV* 框架，最適于開發(fā)客戶端的單頁面應(yīng)用。它不是個(gè)功能庫，而是用來開發(fā)動態(tài)網(wǎng)頁的框架。它專注于擴(kuò)展 HTML 的功能，提供動態(tài)數(shù)據(jù)綁定（data binding），而且它能跟其它框架（如 JQuery 等）合作融洽。

<body ng-app="myNoteApp">
<html>
<div ng-controller="myNoteCtrl"> 
<p><textarea ng-model="message" cols="40" rows="10" maxlength="100"></textarea></p>
<p>100/<span ng-bind="left()"></span></p>
</div>
</html>
<script type="text/javascript">
var app=angular.module("myNoteApp",[]);
app.controller("myNoteCtrl",function($scope){
$scope.message = "";
//顯示變更數(shù)量
$scope.left = function() {return 100 - $scope.message.length;};
//清除文本框
$scope.clear = function() {$scope.message = "";};
//執(zhí)行保存操作
$scope.save = function() {alert("Note Saved");};
});
</script>
</body>

備注：

如果在同一個(gè)表單中有多個(gè)“textarea”可以通過定義多個(gè)“ng-model”來控制

如果在不同的表單中操作不同的”textarea“ ，可以通過定義多個(gè)“ng-controller”來控制

但不管何種情況，如果在同一個(gè)文件中，同一個(gè)body中最好只使用一個(gè)”ng-app“

補(bǔ)充：Angular JS 中的 <textarea>用法

最近測試用把 textarea 中的值傳往后臺傳，不過后臺收不到，代碼是這樣寫的：

<textarea rows="15" ng-model="notice.content" style="width:65%">{{ notice.content }}</textarea>

后來修改了一下，把兩個(gè) textarea 之間的內(nèi)容去掉了，后臺就能收到了，看來Angular JS中還是有一些機(jī)制需要去弄清楚。

<textarea rows="15" ng-model="notice.content" style="width:65%"></textarea>

您可能感興趣的文章:

相關(guān)文章

JS基于貪心算法解決背包問題示例
這篇文章主要介紹了JS基于貪心算法解決背包問題,簡單說明了貪心算法的概念、原理,并結(jié)合具體實(shí)例形式分析了JS使用貪心算法解決部分背包問題的具體操作技巧,需要的朋友可以參考下
2017-11-11
date.parse在IE和FF中的區(qū)別
這個(gè)方法是很常用的，比如在驗(yàn)證輸入日期是否存在時(shí)，可以使用它，如果是一個(gè)不存在的日期，則其返回值將是NaN，另外如果要比較兩個(gè)日期的先后，或是計(jì)算兩個(gè)日期相差的天數(shù) ，都可以用到。
2010-07-07
javascript實(shí)現(xiàn)可改變滾動方向的無縫滾動實(shí)例
無縫滾動在制作一些圖片展示的時(shí)候還是蠻有用的，下面與大家分享下javascript實(shí)現(xiàn)的可改變滾動方向的無縫滾動，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈
2013-06-06
微信小程序簡單的canvas裁剪圖片功能詳解
這篇文章主要介紹了微信小程序簡單的canvas裁剪圖片功能詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
JavaScript實(shí)現(xiàn)sleep睡眠函數(shù)的幾種簡單方法總結(jié)
sleep是一種函數(shù),他的作用是使程序暫停指定的時(shí)間,起到延時(shí)的效果,下面這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)sleep睡眠函數(shù)的幾種簡單方法總結(jié),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
淺談js多維數(shù)組和hash數(shù)組定義和使用
下面小編就為大家?guī)硪黄獪\談js多維數(shù)組和hash數(shù)組定義和使用。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-07-07
JS call()及apply()方法使用實(shí)例匯總
這篇文章主要介紹了JS call()及apply()方法使用實(shí)例匯總,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-07-07
使用webpack3.0配置webpack-dev-server教程
這篇文章主要介紹了使用webpack3.0配置webpack-dev-server教程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05
javascript中判斷json的方法總結(jié)
JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式，采用完全獨(dú)立于語言的文本格式，是理想的數(shù)據(jù)交換格式。同時(shí)，JSON是 JavaScript 原生格式，這意味著在 JavaScript 中處理 JSON數(shù)據(jù)不須要任何特殊的API或工具包，接下來跟著小編學(xué)習(xí)js中判斷json的方法吧
2015-08-08
javascript控制在光標(biāo)位置插入文字適合表情的插入
使用javascript控制在光標(biāo)位置插入文字，在實(shí)現(xiàn)表情的插入時(shí)會用到的,需要的朋友可以參考下
2014-06-06