AngularJS實(shí)現(xiàn)textarea記錄只能輸入規(guī)定數(shù)量的字符并顯示
更新時(shí)間：2016年04月26日 11:41:20 作者：tskpcp
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>
您可能感興趣的文章:
- Angular js 實(shí)現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法
- AngularJS模糊查詢功能實(shí)現(xiàn)代碼(過濾內(nèi)容下拉菜單排序過濾敏感字符驗(yàn)證判斷后添加表格信息)
- AngularJS 過濾與排序詳解及實(shí)例代碼
- Bootstrap + AngularJS 實(shí)現(xiàn)簡單的數(shù)據(jù)過濾字符查找功能
- Angular搜索 過濾 批量刪除 添加 表單驗(yàn)證功能集錦(實(shí)例代碼)
- Angular實(shí)現(xiàn)較為復(fù)雜的表格過濾，刪除功能示例
- Angularjs 雙向綁定時(shí)字符串的轉(zhuǎn)換成數(shù)字類型的問題
- Angularjs驗(yàn)證用戶輸入的字符串是否為日期時(shí)間
- Angular實(shí)現(xiàn)的敏感文字自動過濾與提示功能示例
相關(guān)文章
layui實(shí)現(xiàn)數(shù)據(jù)表格隱藏列的示例
今天小編就為大家分享一篇layui實(shí)現(xiàn)數(shù)據(jù)表格隱藏列的示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了Express的路由詳解的相關(guān)資料,需要的朋友可以參考下2015-12-12
本篇文章主要介紹了深入理解ES7的async/await的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
在本篇文章里小編給大家整理了一篇關(guān)于js正則表達(dá)式簡單校驗(yàn)方法，有需要的朋友們可以參考下。2021-01-01
Javascript實(shí)現(xiàn)鼠標(biāo)移入方向感知
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)鼠標(biāo)移入方向感知，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
下面小編就為大家?guī)硪黄仙Ｕ凧avaScript 函數(shù)表達(dá)式。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
今天小編就為大家分享一篇對layui中table組件工具欄的使用詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
本篇文章主要介紹了使用Ajax與服務(wù)器（JSON）通信方法，Ajax提供了兩類服務(wù)器通信手段：同步通信和異步通信。有需要的可以了解一下。2016-11-11
本文給大家推薦的是一個(gè)使用js獲取圖片的原始尺寸的例子，從本人項(xiàng)目中摳出來的，這里奉獻(xiàn)給大家，有需要的直接拿走。2014-12-12
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)拖動模糊框特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08