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 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
JS中常用的正则表达式
Sep 29 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 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去除HTML标签实例
2013/11/06 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
js 操作select相关方法函数
2009/12/06 Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
简单的js表单验证函数
2013/10/28 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
python 容器总结整理
2017/04/04 Python
Python实现批量压缩图片
2018/01/25 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
微信公众号token验证失败解决方案
2019/07/22 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
详解python中的闭包
2020/09/07 Python
Python脚本调试工具安装过程
2021/01/11 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
送餐员岗位职责范本
2014/02/21 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
经典导游欢迎词
2015/01/26 职场文书
php字符串倒叙
2021/04/01 PHP
python通过opencv调用摄像头操作实例分析
2021/06/07 Python
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL