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 相关文章推荐
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
深入理解redux之compose的具体应用
Jan 12 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 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 无限级 SelectTree 类
2009/05/19 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
JQuery从头学起第一讲
2010/07/04 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
javascript中this的四种用法
2015/05/11 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
JS计算斐波拉切代码实例
2019/09/12 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
Python中字符编码简介、方法及使用建议
2015/01/08 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
python关闭占用端口方式
2019/12/17 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
酒店管理专业毕业生推荐信
2013/11/10 职场文书
影视艺术学院毕业生自荐信
2013/11/13 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
匿名检举信范文
2015/03/02 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
python中如何对多变量连续赋值
2021/06/03 Python