AngularJS实现textarea记录只能输入规定数量的字符并显示


Posted in Javascript onApril 26, 2016

AngularJS 是一个 MV* 框架,最适于开发客户端的单页面应用。它不是个功能库,而是用来开发动态网页的框架。它专注于扩展 HTML 的功能,提供动态数据绑定(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 = "";
//显示变更数量
$scope.left = function() {return 100 - $scope.message.length;};
//清除文本框
$scope.clear = function() {$scope.message = "";};
//执行保存操作
$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>
Javascript 相关文章推荐
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
AngularJS实现分页显示数据库信息
Jul 01 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 #Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 #Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 #Javascript
JavaScript事件处理的方式(三种)
Apr 26 #Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 #Javascript
jQuery siblings()用法实例详解
Apr 26 #Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 #Javascript
You might like
php生成随机颜色方法汇总
2014/12/03 PHP
php计算函数执行时间的方法
2015/03/20 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
python机器人行走步数问题的解决
2018/01/29 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
python实现xml转json文件的示例代码
2020/12/30 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
机电专业大学生求职信
2013/10/04 职场文书
应届生的求职推荐信范文
2013/11/30 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
《蜗牛》教学反思
2014/02/18 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
初中作文评语
2014/12/25 职场文书
行政处罚告知书
2015/07/01 职场文书
新闻报道稿范文
2015/07/23 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
Python基础学习之奇异的GUI对话框
2021/05/27 Python