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 相关文章推荐
JQuery 文本框使用小结
May 22 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
判断javascript的数据类型(示例代码)
Dec 11 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 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
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
jQuery EasyUI 中文API Layout(Tabs)
2010/04/27 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
Javascript实现字数统计
2015/07/03 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
Python中unittest用法实例
2014/09/25 Python
Python爬豆瓣电影实例
2018/02/23 Python
python实现对输入的密文加密
2019/03/20 Python
python中使用while循环的实例
2019/08/05 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
毕业评语大全
2014/05/04 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
2014年资料员工作总结
2014/11/18 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
用python实现监控视频人数统计
2021/05/21 Python
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
Java设计模式之代理模式
2022/04/22 Java/Android