AngularJS實(shí)現(xiàn)textarea記錄只能輸入規(guī)定數(shù)量的字符并顯示
更新時(shí)間：2016年04月26日 11:41:20 作者：tskpcp
AngularJS 是一個(gè) MV* 框架，最適于開(kāi)發(fā)客戶端的單頁(yè)面應(yīng)用。它不是個(gè)功能庫(kù)，而是用來(lái)開(kāi)發(fā)動(dòng)態(tài)網(wǎng)頁(yè)的框架。接下來(lái)通過(guò)本文給大家介紹AngularJS實(shí)現(xiàn)textarea記錄只能輸入規(guī)定數(shù)量的字符并顯示的相關(guān)內(nèi)容，需要的朋友參考下吧
AngularJS 是一個(gè) MV* 框架，最適于開(kāi)發(fā)客戶端的單頁(yè)面應(yīng)用。它不是個(gè)功能庫(kù)，而是用來(lái)開(kāi)發(fā)動(dòng)態(tài)網(wǎng)頁(yè)的框架。它專注于擴(kuò)展 HTML 的功能，提供動(dòng)態(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”可以通過(guò)定義多個(gè)“ng-model”來(lái)控制
如果在不同的表單中操作不同的”textarea“ ，可以通過(guò)定義多個(gè)“ng-controller”來(lái)控制
但不管何種情況，如果在同一個(gè)文件中，同一個(gè)body中最好只使用一個(gè)”ng-app“
補(bǔ)充：Angular JS 中的 <textarea>用法
最近測(cè)試用把 textarea 中的值傳往后臺(tái)傳，不過(guò)后臺(tái)收不到，代碼是這樣寫(xiě)的：
<textarea rows="15" ng-model="notice.content" style="width:65%">{{ notice.content }}</textarea>
后來(lái)修改了一下，把兩個(gè) textarea 之間的內(nèi)容去掉了，后臺(tái)就能收到了，看來(lái)Angular JS中還是有一些機(jī)制需要去弄清楚。
<textarea rows="15" ng-model="notice.content" style="width:65%"></textarea>
您可能感興趣的文章:
- Angular js 實(shí)現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法
- AngularJS模糊查詢功能實(shí)現(xiàn)代碼(過(guò)濾內(nèi)容下拉菜單排序過(guò)濾敏感字符驗(yàn)證判斷后添加表格信息)
- AngularJS 過(guò)濾與排序詳解及實(shí)例代碼
- Bootstrap + AngularJS 實(shí)現(xiàn)簡(jiǎn)單的數(shù)據(jù)過(guò)濾字符查找功能
- Angular搜索 過(guò)濾 批量刪除 添加 表單驗(yàn)證功能集錦(實(shí)例代碼)
- Angular實(shí)現(xiàn)較為復(fù)雜的表格過(guò)濾，刪除功能示例
- Angularjs 雙向綁定時(shí)字符串的轉(zhuǎn)換成數(shù)字類型的問(wèn)題
- Angularjs驗(yàn)證用戶輸入的字符串是否為日期時(shí)間
- Angular實(shí)現(xiàn)的敏感文字自動(dòng)過(guò)濾與提示功能示例
相關(guān)文章
layui實(shí)現(xiàn)數(shù)據(jù)表格隱藏列的示例
今天小編就為大家分享一篇layui實(shí)現(xiàn)數(shù)據(jù)表格隱藏列的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
這篇文章主要介紹了Express的路由詳解的相關(guān)資料,需要的朋友可以參考下2015-12-12
本篇文章主要介紹了深入理解ES7的async/await的用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
在本篇文章里小編給大家整理了一篇關(guān)于js正則表達(dá)式簡(jiǎn)單校驗(yàn)方法，有需要的朋友們可以參考下。2021-01-01
Javascript實(shí)現(xiàn)鼠標(biāo)移入方向感知
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)鼠標(biāo)移入方向感知，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
下面小編就為大家?guī)?lái)一篇老生常談JavaScript 函數(shù)表達(dá)式。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
今天小編就為大家分享一篇對(duì)layui中table組件工具欄的使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
本篇文章主要介紹了使用Ajax與服務(wù)器（JSON）通信方法，Ajax提供了兩類服務(wù)器通信手段：同步通信和異步通信。有需要的可以了解一下。2016-11-11
本文給大家推薦的是一個(gè)使用js獲取圖片的原始尺寸的例子，從本人項(xiàng)目中摳出來(lái)的，這里奉獻(xiàn)給大家，有需要的直接拿走。2014-12-12
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)拖動(dòng)模糊框特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08