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 相关文章推荐
日期函数扩展类Ver0.1.1
Sep 07 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
JS使用H5实现图片预览功能
Sep 30 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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
python 性能优化方法小结
2017/03/31 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
分分钟入门python语言
2018/03/20 Python
django session完成状态保持的方法
2018/11/27 Python
python反编译学习之字节码详解
2019/05/19 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
大学生应聘自荐信
2013/10/11 职场文书
硕士研究生个人求职信
2013/12/04 职场文书
临床医师专业个人自我评价
2014/01/08 职场文书
财务担保书范文
2014/04/02 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
鸡毛信观后感
2015/06/11 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL