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处理VBArray的函数使用说明
May 11 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 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 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
javascript中的几个运算符
2007/06/29 Javascript
JavaScript 事件参考手册
2008/12/24 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
Python里disconnect UDP套接字的方法
2015/04/23 Python
Python中DJANGO简单测试实例
2015/05/11 Python
关于Django外键赋值问题详解
2017/08/13 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
Python交互式图形编程的实现
2019/07/25 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
业务部经理岗位职责
2014/01/04 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
技校毕业生自荐信
2014/06/03 职场文书
妇女工作先进事迹
2014/08/17 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
2014年质检工作总结
2014/11/26 职场文书
2014年度考核工作总结
2014/12/24 职场文书
家装电话营销开场白
2015/05/29 职场文书
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang