AngularJS實現(xiàn)textarea記錄只能輸入規(guī)定數(shù)量的字符并顯示

更新時間：2016年04月26日 11:41:20 作者：tskpcp

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

AngularJS 是一個 MV* 框架，最適于開發(fā)客戶端的單頁面應用。它不是個功能庫，而是用來開發(fā)動態(tài)網(wǎng)頁的框架。它專注于擴展 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>

備注：

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

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

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

補充：Angular JS 中的 <textarea>用法

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

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

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

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

您可能感興趣的文章:

layui實現(xiàn)數(shù)據(jù)表格隱藏列的示例
今天小編就為大家分享一篇layui實現(xiàn)數(shù)據(jù)表格隱藏列的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
Express的路由詳解
這篇文章主要介紹了Express的路由詳解的相關資料,需要的朋友可以參考下
2015-12-12
深入理解ES7的async/await的用法
本篇文章主要介紹了深入理解ES7的async/await的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
js正則表達式簡單校驗方法
在本篇文章里小編給大家整理了一篇關于js正則表達式簡單校驗方法，有需要的朋友們可以參考下。
2021-01-01
Javascript實現(xiàn)鼠標移入方向感知
這篇文章主要為大家詳細介紹了Javascript實現(xiàn)鼠標移入方向感知，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06
老生常談JavaScript 函數(shù)表達式
下面小編就為大家?guī)硪黄仙Ｕ凧avaScript 函數(shù)表達式。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-09-09
對layui中table組件工具欄的使用詳解
今天小編就為大家分享一篇對layui中table組件工具欄的使用詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
使用Ajax與服務器（JSON）通信實例
本篇文章主要介紹了使用Ajax與服務器（JSON）通信方法，Ajax提供了兩類服務器通信手段：同步通信和異步通信。有需要的可以了解一下。
2016-11-11
使用js獲取圖片原始尺寸
本文給大家推薦的是一個使用js獲取圖片的原始尺寸的例子，從本人項目中摳出來的，這里奉獻給大家，有需要的直接拿走。
2014-12-12
JS實現(xiàn)拖動模糊框特效
這篇文章主要為大家詳細介紹了JS實現(xiàn)拖動模糊框特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08