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 相关文章推荐
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
给js文件传参数(详解)
Jul 13 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 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
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
this和执行上下文实现代码
2010/07/01 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
python生成requirements.txt的两种方法
2019/09/18 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
法国珠宝店:CLEOR
2017/01/29 全球购物
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
教师对学生的评语
2014/04/28 职场文书
技术负责人任命书
2014/06/05 职场文书
班主任先进事迹材料
2014/12/17 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers