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 相关文章推荐
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
JavaScript undefined及null区别实例解析
Jul 21 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 命名空间实例说明
2011/01/27 PHP
PHP 日,周,月点击排行统计
2012/01/11 PHP
php对称加密算法示例
2014/05/07 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
Python3基础之条件与循环控制实例解析
2014/08/13 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
Python_LDA实现方法详解
2017/10/25 Python
Python 多核并行计算的示例代码
2017/11/07 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
二年级数学教学反思
2014/01/21 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
商场租赁意向书
2014/07/30 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
田径运动会通讯稿
2015/07/18 职场文书